CODEWITHSUNDEEP
javascriptjquerycss
RzeIMz
RzeIMz

Reputation: 50

Event on leaving Hover

I want to reduce the opacity on some divs if I hover another div, but if I stop hovering the div the opacity should be changed back to 1 again.

HTML

<div id="feld1" onmouseover="show1()"> </div>
<div id="feld2" onmouseover="show2()"> </div>
<div id="feld3" onmouseover="show3()"> </div>

JS

function show1() {
  if ($('#feld1:hover').length != 0) {
    document.getElementById("feld2").style.opacity = 0.1;
    document.getElementById("feld3").style.opacity = 0.1;
  } else {
    document.getElementById("feld2").style.opacity = 1;
    document.getElementById("feld3").style.opacity = 1;   
  }
}

Any ideas on how it will work?

Upvotes: 0

Views: 51

Answers (1)

RzeIMz
RzeIMz

Reputation: 50

Ok i got it...

document.getElementById("feld1").onmouseover = function() {mouseOver()};
document.getElementById("feld1").onmouseout = function() {mouseOut()};

function mouseOver() {

    document.getElementById("feld2").style.opacity = 0.1;
    document.getElementById("feld3").style.opacity = 0.1;
}

function mouseOut() {
     document.getElementById("feld2").style.opacity = 1;
    document.getElementById("feld3").style.opacity = 1; 
}

Upvotes: 1

Related Questions