Как применить цвет фона к нескольким элементам при наведении?

У меня есть несколько списков, которые отображаются как встроенные блоки, создавая иллюзию строк. В отличие от таблиц, я не могу форматировать строки прямо. Я хочу применить цвет фона к каждому < li> в строке, когда он завис. Возможно ли это с помощью CSS и имен/идентификаторов?Как применить цвет фона к нескольким элементам при наведении?

Спасибо.

Майк

ПОЯСНЕНИЕ: После прочтения ответов, я понял, что мой вопрос был неясен. У меня есть 3 списка, бок о бок, поэтому первый < li> в каждом списке будет представлять первую строку. Второй < li> в каждом списке будет второй строкой. И так далее.

источник

2009-07-19 Mike

Похоже, что вы пытаетесь сделать таблицу с элементами списка, вместо этого. Есть ли причина, по которой вы не просто используете таблицу? – jimyi

У меня тоже вопрос. Почему бы просто не использовать элемент таблицы? – pegasus4747

поддержка кросс-браузер с JQuery:

CSS:

li:hover { background-color: #F00 }

И для IE6 - так как он не поддерживает: парить псевдо-класс на что-либо, кроме < через > элементы - вам служить ему следующее в ваших IE6 конкретных таблицах стилей и сценарии:

CSS:

li.hover { background-color: #F00 }

JS:

$("li").hover(
    function() { 
    $(this).addClass("hover"); 
    }, 
    function() { 
    $(this).removeClass("hover"); 
    } 
);

источник

2009-07-19 20:26:21

Я чуть не дал вам -1, но потом понял, к чему вы клоните, поэтому позвольте мне указать его явно для остальной части класса: IE6 поддерживает только зависание на anchor (a), а не на элементах списка (li). –

Отредактировал свой ответ, чтобы отразить это, для класса. –

Не уверен, если я правильно понимаю, но это довольно простое решение должно сделать трюк:

li:hover { 
    background-color: pink; 
}

Некоторые браузеры не поддерживают псевдо класс парения, хотя.

источник

2009-07-19 20:22:43

похоже, что вы не поняли вопрос правильно :) – Kamarey

Если вы хотите применить стиль для всех дочерних элементов конкретного <ul>, вы можете использовать подход bigmattyh, но установить класс на <ul> вместо <li>.

Затем добавить стиль CSS, такие как это:

.hover li { /* some styles */ }

Используя этот подход можно применить стили для всех дочерних <li> элементов, но вам нужно будет только обработчики событий в родительском <ul>, делая ваш код работает быстрее.

источник

2009-07-19 20:37:03

Я бы упростил и реорганизовал ваш HTML, чтобы каждый UL представлял собой строку вместо столбца.

<html> 
<head> 
<style> 
    ul { clear: both; } 
    ul li { 
    float: left; 
    list-style: none; 
    padding: 5px 10px; 
    border: 1px solid white; } 
    .hover { background-color: red; } 
</style> 
</head> 
<body> 
    <div id='list-container'> 
    <ul class="hover"> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    </div> 
</body> 
</html>

И JS:

$(document).ready(function() { 
    var alterRow = function(container, class, toggleOn) { 
    $(container).children().each(function(i, node) { 
     if (toggleOn) { 
     $(node).addClass(class); 
     } else { 
     $(node).removeClass(class); 
     } 
    }); 
    }; 

    $("#list-container ul").each(function(i, node) { 
    $(node).hover(
     function() { alterRow(node, "hover", true); }, 
     function() { alterRow(node, "hover", false); } 
    ); 
    }); 
});

Вы можете просматривать и редактировать его здесь: http://jsbin.com/ewijo

источник

2009-07-19 23:55:54

Я взгляну и посмотрю, смогу ли я заставить это работать. – Mike

Как применить цвет фона к нескольким элементам при наведении?

ответ

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