Добавить прозрачный оверлей ко всем объектам LI, не в фокусе

Question

У меня есть список продуктов в пределах LI, и мне нужно сделать, чтобы при наведении курсора на продукт мне были нужны все остальные LI (продукты), чтобы на них было небольшое наложение, поэтому продукт, на который наведен курсор, более заметен.

Любая помощь будет принята с благодарностью.

Answer 1

Может быть, просто отрегулируйте непрозрачность для не зависших li с и установите непрозрачность на 1 для накрытых li?

ul:hover li {
  opacity: .8;
}
ul:hover li:hover {
  opacity: 1;
}

См. Это на jsFiddle: http://jsfiddle.net/TXfKG/

ОБНОВЛЕНИЕ: Как уже упоминалось @amustill, если вы заботитесь о IE6, вы можете добавить поддержку для него с помощью другого свойства: filter: alpha(opacity=50);

Answer 2

Это решение, предназначенное только для CSS, с исправлением JS для IE6.

http://jsbin.com/asico4/3

Редактировать: Обновленная ссылка, оставленная в опечатке.

Answer 3

Вы можете сделать что-то вроде этого jsFiddle :

HTML:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>

CSS:

li { padding: 10px; background: #ccc; border: solid 1px black; cursor: pointer; }

jQuery:

var $listItems = $("ul li");

$listItems.hover(function() {

    $listItems.not(this).css("opacity", "0.5");

}, function() {

    $listItems.not(this).css("opacity", "1.0");    

});