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

You can achieve that by using the `:not()` selector. – Vlad Apr 30 '15 at 12:26 — Vlad, Apr 30 '15 at 12:26
will you post your css here which you applied currently? – ketan Apr 30 '15 at 12:29 — ketan, Apr 30 '15 at 12:29

score 4 · Answer 1 · answered Apr 30 '15 at 12:31

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>

score 1 · Answer 2 · answered Apr 30 '15 at 12:33

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.

score 0 · Accepted Answer · answered Apr 30 '15 at 12:37

0

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;}

answered Apr 30 '15 at 12:37

Jon Holland

391
7
19

score -1 · Answer 4 · edited Apr 30 '15 at 13:18

-1

There exists an attribute in CSS to do that!

edited Apr 30 '15 at 13:18

vefthym

7,422
6
32
58

answered Apr 30 '15 at 12:27

White

111
1
8

care to elaborate? or is op supposed to guess? – Banana Apr 30 '15 at 12:29

Hover on one HTML element effect another

4 Answers4