Предотвратить рекурсивный CSS: эффект зависания

Рассмотрим следующие css и html.Предотвратить рекурсивный CSS: эффект зависания

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Hover Test</title> 
    <style> 
     div { 
      min-height: 20px; 
      margin:20px; 
      border: 1px solid #000; 
      background-color: #fff; 
     } 
     div:hover { 
      background-color: #000; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
    </div> 
    <div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
     <div> 
      <div></div> 
      <div></div> 
     </div> 
    </div> 
</body> 
</html>

Результирующий эффект заключается в том, что он показывает эффект наведения на всех узлах мыши, независимо от дочерних узлов.

Эффект, за которым я запираюсь, - это показать эффект наведения только на узлах, на которых прячется мышь. Это не показывает эффект наведения на элемент, когда мышь находится над дочерним узлом.

Есть ли способ сделать это только в CSS?

Если не я предполагаю, что я всегда мог использовать OnMouseOveronmouseout обработчиков событий и с помощью класса CSS .hover или аналогичный. Butt Я бы предпочел найти решение, которое не мутирует поврежденный dom-узел и легко настраивается с помощью CSS.

источник

2011-01-29 LeadingLight

Мне любопытно: что с '' Перед документом XHTML – mauris

@thephpdeveloper: документы XHTML 1.0/1.1, используемые как 'application/xhtml + xml' требует подтверждения XML-объявления. Однако, если вы обслуживаете их как «text/html», объявление XML не требуется. Лучше оставить его, иначе IE (по крайней мере, я думаю, IE6) перейдет в режим quirks. – BoltClock

Если вы хотите только узлы листьев, чтобы получить черный цвет фона, и вы можете гарантировать, что будет только ровно три уровня узлов, вы можете сделать это:

div > div > div:hover { 
    background-color: #000; 
}

В противном случае вы должны использовать JavaScript для установки цветов фона листовых узлов и их родительских узлов.

Вот что-то с помощью JQuery, который работает:

$('div').hover(function() { 
    $(this).css('background-color', '#000'); 
    $(this).parents('div').css('background-color', '#fff'); 
}, function() { 
    $(this).css('background-color', '#fff'); 
    $(this).parent('div').css('background-color', '#000'); 
});

Preview on jsFiddle

источник

2011-01-29 13:34:03 BoltClock

Ohh Мне нравится jsFiddle. Да, вещь jQuery достигает желаемого эффекта. Но мне нужно быть abel для того, чтобы создать какой эффект эффекта с CSS. Я мог бы сделать это, установив классы на узлы вместо прямых стилей, но это означает, что он будет мутировать узел, который мне очень хотелось бы избежать. – LeadingLight

@LeadingLight: К сожалению, ваши единственные варианты - использовать jQuery для применения стилей или использования классов. HTML определяет структуру, а не стиль или поведение, которые являются специальностями CSS и JavaScript. – BoltClock

Я предполагаю, что это не возможно с помощью CSS, потому что вы должны выбрать родительский узел наведен элемента, как div:hover < div, но не является родительским селектором < в CSS.

Но это легко сделать с событиями JavaScript.

источник

2011-01-29 13:48:41 Floern

Предотвратить рекурсивный CSS: эффект зависания

ответ

Смежные вопросы