Подскажите как сделать чтобы background ссылки оставался белым до тех пока открыт <div class="None, т.е когда мышка убирается ссылки .__open:hover исчезает как его сохранить до тех пор пока пользователь водит мышкой по открытому блоку None ? https://jsfiddle.net/n9edcf8v/1/
Для ссылки и блока нужно сделать дополнительную обертку. И уже через нее задавать стили при наведении. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #cecece; } .link-wrap { visibility: hidden; } .__open { visibility: visible; } .None { visibility: visible; display: none; background-color: #fff; width: 358px; height: 368px; } .link-wrap:hover .__open { background-color: #fff; color: #4a4a4a; } .link-wrap:hover .None { display: block; } </style> </head> <body> <div class="link-wrap"> <a class="__open" href="#">Ссылка 4</a> <div class="None"></div> </div> </body> </html>
Спасибо,к чему использовать visibility: visible; если я использую отлавливаю div за счет "+", или мой вариант не правильный ?
visibility hidden для обертки задан для того, чтобы hover не отслеживался на пустом месте возле ссылки. Правильный, но ваш вопрос из первого поста таким способом не решить.
Поскольку я только учусь много не знаю еще не понимаю но пытаюсь что-то visibility: hidden и visibility: visible Можно я приведу тупой пример но я попытаюсь понять принцип работы visibility Есть у меня комната с мебелью допустим и я хочу чтобы стул остался на своем месте он существовал но его не было видно я использую visibility: hidden?
@Неугомонный Это работает немного по другому. Задавая visibility: hidden для родителя мы делаем блок невидимым. Хотя он будет занимать свое место (в отличие от display: none). А затем мы задаем visibility: visible для дочерних элементов блока, чтобы они стали видимыми. Если перевести на ваш пример, то мы "не будем видеть комнату, но будем видеть мебель внутри этой комнаты".
Я очень был близок скажем так )) .link-wrap { visibility: hidden; // мы сделали невидимый блок но он существует мы сам блок не видим это родитель } .__open { visibility: visible; // это дочерный стиль link-wrap, и т.е мы просто показали ссылку в блоке т.е если не использовать visibility: visible все в блоке который существует будет скрыто ? } .None { visibility: visible; display: none; // И для того чтобы показать контент мы использует visibility: visible поскольку у родителя стоит hidden и контент не будет показан но он будет существовать background-color: #fff; width: 358px; height: 368px; } Верно все?