Hover on one HTML element effect another

Question

I have shop one Prestashop 1.6.0.14 with many products. The main idea is to make opacity on every displayed products in grid eccept the one that has a hover.

Here is my code (simplified):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>

I found a bit of solution HERE but using selectors "+" or "~" effects only containers after the one I have hover on, not those before it. Is there any solution (CSS, JS)? I appreciate any help.

Here is my website

Answer 1

You could try something like:

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 2

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

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

My initial comment to your post was a suggestion to use the :not() selector, but it's not a good answer. :) Here's a solution, it's not very nice, but it's a CSS solution.

Answer 3

Someone beat me to it as I was creating a jsfiddle - use hover on the ul

JSFiddle

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

Answer 4

There exists an attribute in CSS to do that!