menu

Questions & Answers

How can I use JavaScript, or jQuery to add style to an image, when hovering over another image?

Please see "box5385.temp.domains/~atelifw5/test/" for reference

I have a div containing a background image that fades on hover. Also, when hovering the background image, a second div image (within the same container) transitions in, positioned on top of the background image.

When you click the top image, it runs JavaScript code that slides in a group of social media icons to the far right. My problem is, when the user hovers over the top image to click it, the background image is no longer faded and it needs to remain faded.

I cannot do this with CSS, because of the order of the divs in the HTML content, will not allow me to do so, and I cannot change the order as the top image will not appear on hover if I change the order. I have tried a number of things with JavaScript and jQuery, but I have been unsuccessful.

Below is my code:

function myFunction() {
  var x = document.getElementById("hidden-social");
  x.addEventListener("animationend", function(e) {
    e.preventDefault();
    if (x.style.animationName == "slide-left") {
      x.style.display = "none";
    }
  });
  if (x.style.display === "none") {
    x.style.display = "block";
    x.style.animation = "1s slide-right";
  } else {
    x.style.animation = "1s slide-left";
  }
}
.fading-image {
  opacity: 1;
  transition: opacity 1s;
}

.fading-image:hover {
  opacity: 0.5;
}

.cross-button {
  opacity: 0;
  transition: opacity 1s;
  cursor: pointer;
  position: relative;
  top: -50px;
  left: 325px;
}

.fading-image:hover~.cross-button,
.cross-button:hover {
  opacity: 1;
}

.social-icon-2 {
  width: 25px;
}

.social-icon-p2 {
  width: 15px;
}

#hidden-social-container {
  width: 200px;
  height: 32px;
  position: relative;
  top: -80px;
  left: 640px;
  overflow: hidden;
}

#hidden-social {
  width: 145px;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes slide-left {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: -100%;
  }
}
<div class="ev-fade">
  <div class="fading-image"><img src="http://box5385.temp.domains/~atelifw5/wp-
content/uploads/2022/12/RO_PIX_EV_03.png">
  </div>

  <div class="cross-button" onclick="myFunction()"><img src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_.png">
  </div>
</div>


<div id="hidden-social-container">
  <div id="hidden-social" style="display:none;">

    <a href="https://instagram.com" target="blank"><img class="social-icon-
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Instagram_Black.svg">
    </a>

    <a href="https://www.facebook.com/sharer/sharer.php?
u=http://box5385.temp.domains/~atelifw5/east-village" target="blank"><img class="social-icon-
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black.svg">
    </a>

    <a href="https://twitter.com/share?url=http://box5385.temp.domains/~atelifw5/east-village/" target="_blank">
      <img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp-
content/uploads/2022/12/Facebook_Black.svg"></a>

    <a href="https://www.linkedin.com/shareArticle?url=http://box5385.temp.domains/~atelifw5/east-
village" target="blank"><img class="social-icon-
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/LinkedIn_Black.svg">
    </a>

    <a href="https://pinterest.com/pin/create/button/" target="blank"><img class="social-icon-
p2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Pinterest_Black.svg">
    </a>
  </div>
</div>
Answers(1) :

I changed the classes to Id's. Not that it was necessary, but it just happened along the way while I was working this out. The only thing I did was added the code below to my JavaScript code.

document.getElementById("cross-button").onmouseover = function() {
    mouseOver()
};
document.getElementById("cross-button").onmouseout = function() {
    mouseOut()
};

function mouseOver() {
    document.getElementById("fading-image").style.opacity = "0.5";
}

function mouseOut() {
    document.getElementById("fading-image").style.opacity = "1";
}

document.getElementById("fading-image").onmouseover = function() {
    mouseOver()
};
document.getElementById("fading-image").onmouseout = function() {
    mouseOut()
};

function mouseOver() {
    document.getElementById("fading-image").style.opacity = "0.5";
}

function mouseOut() {
    document.getElementById("fading-image").style.opacity = "1";
}