CSS для наведения, который включает все дочерние элементы
У меня есть перетаскиваемый элемент div со стилем наведения. Это нормально работает, но div содержит некоторые элементы формы (метка, ввод). Проблема в том, что при наведении указателя мыши на эти дочерние элементы наведение отключено.
<div class = "app_setting">
<label">Name</label>
<input type = "text" name = "name"/>
</div>
.app_setting:hover {
cursor:move;
}
Есть идеи, как заставить наведение также применяться к дочерним элементам?
Ответы 4
.app_setting *:hover { cursor:move }
При использовании Firefox (по общему признанию, несколько лет спустя) это не работает. На самом деле это работает даже менее эффективно, чем первоначальная попытка вопрошающего (с использованием! Important или нет)
Как минимум 2 способа сделать это:
- состояния наведения для каждого дочернего элемента, либо явно, либо с помощью селектора
*, как было предложено garrow.class *:hover - состояние каскада наведения для детей
.class:hover *
Наверное, есть и другие
опция .class: hover * работала для меня, когда .class *: hover - нет. Спасибо, Линус!
Возможно, вам придется прибегнуть к JS, чтобы это произошло в IE6.
Недавно я решил, что не буду поддерживать IE 6 ни в одной из моих новых разработок.
Это не ответ css, но он все равно может быть вам полезен.
Кто-то уже предположил, что вам, возможно, придется прибегнуть к javascript для совместимости с браузером. Если вы действительно прибегаете к javascript, вы можете использовать библиотеку jquery, чтобы упростить задачу.
$(".appsetting").hover(hoverInFunc,hoverOutFunc);
Это устанавливает обработчик событий для наведения и выхода из выбранных элементов в соответствии с селектором стиля css в вызове $().
+1, также рассмотрите hoverIntent, это плагин, который, на мой взгляд, намного лучше, чем метод .hover по умолчанию.
как и со всеми правилами css, вам, возможно, придется использовать
.app_setting *:hover { cursor:move !important; }для переопределения любого курсора, который вы, возможно, установили для дочерних элементов в другом месте в правилах css