CODEWITHSUNDEEP
htmlcsshover
Szkudi
Szkudi

Reputation: 3

Hover on one HTML element effect another

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

Upvotes: 0

Views: 97

Answers (4)

White
White

Reputation: 111

There exists an attribute in CSS to do that!

Upvotes: -1

Jon Holland
Jon Holland

Reputation: 401

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

Upvotes: 0

Vlad
Vlad

Reputation: 901

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.

Upvotes: 1

Pik_at
Pik_at

Reputation: 1457

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>

Upvotes: 4

Related Questions