Наведите указатель мыши на один элемент HTML-эффекта еще

Question

У меня есть магазин Prestashop 1.6.0.14 со многими продуктами. Основная идея заключается в том, чтобы сделать непрозрачность для каждого отображаемого продукта в сетке, исключая ту, которая имеет зависание.

Вот мой код (упрощенно): HTML

<div id="tab-content"> 
<ul id="list"> 
<li class=product></li> 
<li class=product></li> 
<li class=product></li> 
<li class=product></li> 
<li class=product></li> 
</ul> 
</div> 

Я нашел немного раствора HERE, но с помощью селекторов «+» или «~» эффекты только контейнеры после того, у меня есть зависать на, а не те, перед этим. Есть ли какое-либо решение (CSS, JS)? Я ценю любую помощь.

Here is my website

Answer 1

Кто-то бил меня к нему, как я создавал jsfiddle - использование парить на ул

JSFiddle

ul:hover .product{background: green;} 
ul:hover li:hover{background: none;} 

Answer 2

Там существует атрибут в CSS, чтобы сделать это!

Answer 3

Вы могли бы попробовать что-то вроде:

ul { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    border: 1px solid; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul:hover li { 
 
    opacity: 0.5; 
 
} 
 
ul li:hover { 
 
    opacity: 1; 
 
} 
 
li{ 
 
    float: left; 
 
    padding: 10px; 
 
    border-left: 1px solid; 
 
    background-color: #eee; 
 
} 
 
li:first-child{ 
 
    border-left: 0; 
 
}

<ul> 
 
    <li>lorem</li> 
 
    <li>ipsum</li> 
 
    <li>dolor</li> 
 
    <li>hello</li> 
 
</ul>

Answer 4

ul:hover li { 
 
    background-color: #000; 
 
} 
 

 
ul li:hover { 
 
    background-color: #fff; 
 
}

Мой первоначальный комментарий к вашему сообщению было предложено использовать селектор :not(), но это не так хороший ответ. :) Вот решение, это не очень приятно, но это решение для CSS.