CODEWITHSUNDEEP
jquerycss
dbj44
dbj44

Reputation: 1998

Make the hovered element go darker, but all the other elements go lighter

I'm not sure if this is now possible with CSS, but when I hover over an element I want it to go darker (opacity of 0.9) and all the other elements to go lighter (opacity of 0.1). When no elements are being hovered, I'd like all elements to have an opacity of 0.5. the markup would look something like this:

<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>

enter image description here

The layout of the boxes is irrelevant.

Maybe JS/jQuery will be needed?

Upvotes: 1

Views: 1181

Answers (4)

Mattia Astorino
Mattia Astorino

Reputation: 1576

Really js to achieve this?! You need just a basic CSS knowledge. :)

.Container {
  cursor: default;
}

.Container:hover .Element:not(:hover) {
 opacity: 0.1;
}


.Element {
  width: 50px;
  height: 50px;
  background-color: rebeccapurple;
  display: inline-block;
  margin: 16px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 200ms;
}


.Element:hover {
  opacity: 0.9;
}
<div class="Container">
  <div class="Element"></div>
  <div class="Element"></div>
  <div class="Element"></div>
  <div class="Element"></div>
</div>

Upvotes: 0

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

A very straight forward .hover() method can give you the intended behaviour.

Code Snippet Demonstration:

jQuery('.box').hover(function(){
  jQuery(this).addClass('darken'); /* darken hovered element */
  jQuery('.box').not(jQuery(this)).addClass('lighten'); /* lighten all other elements */
}, function(){
  jQuery('.box').removeClass('darken lighten'); /* reset after hover out */
});
.box {
  background: #0072ff;
  width: 55px;
  height: 55px;
  display: inline-block;
  transition: .7s;
  opacity: .5;
}

.darken {
  opacity: .9;
}

.lighten {
  opacity: .1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>

Upvotes: 0

Anwarus
Anwarus

Reputation: 138

Not sure it's possible with CSS. But can easy be performed with js and little help of jquery:

$(".box").hover(
	function() {
  	$(".box").each(function(){
    	$(this).css("opacity", 0.1);
    });
  	$(this).css("opacity", 0.9);
  },
  function() {
  	$(".box").each(function(){
    	$(this).css("opacity", 0.5);
    });
  }
);
.box {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box a">a</div>
<br>
<div class="box b">a</div>
<br>
<div class="box c">a</div>
<br>
<div class="box d">a</div>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You don't need jquery for this, it can be done with css. Try the code below, it will give you a good idea how to make what you want.

.box {
  background-color: blue;
  height: 50px;
  width: 50px;
  margin: 10px;
  opacity: 0.6;
}

.wrap:hover .box:hover {
  opacity: 0.9;
}

.wrap:hover .box:not(:hover) {
  opacity: 0.4;
}
<div class="wrap">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
</div>

Upvotes: 8

Related Questions