CODEWITHSUNDEEP
javascripthtmlcss
rajnikant14
rajnikant14

Reputation: 23

javascript-hovering one element changes other

I want that hovering one element affects other element. In this I want on hovering some div part creates animation in images in other div. For that I used this code:

HTML:

<div class="s">hover here</div>
<section>
  <div class="hs-wrapper">
    <img src="images/1.gif" alt="image01"/>
    <img src="images/2.gif" alt="image02"/>
  </div>
</section>

JavaScript:

$(document).ready(function () {
    $(".s").mouseenter(function () {
          $(".hs-wrapper img").css({
        -webkit-animation-play-state:running;
       -moz-animation-play-state: running;
        -o-animation-play-state: running;
         -ms-animation-play-state: running;
         animation-play-state: running; 
        });
      $(".s").mouseleave(function () {
        $(".hs-wrapper img").css({
        -webkit-animation-play-state: paused;
         -moz-animation-play-state: paused;
          -o-animation-play-state: paused;
          -ms-animation-play-state: paused;
           animation-play-state: paused;    
         });
       });

But it's not working. Please provide suggestions.

Upvotes: 2

Views: 85

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

Based on the markup you provided, you don't need jQuery for this.

Just use the selector .s:hover + section .hs-wrapper img. Using the adjacent sibling combinator, +, you can select the succeeding section element when hovering over .s. From there, the child img element is selected.

section .hs-wrapper img {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
}
.s:hover + section .hs-wrapper img {
    -webkit-animation-play-state:running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}

Here is a basic example:

section .hs-wrapper img {
    opacity:0;
    transition: 3s ease-out; /* Mouseleave */
}
.s:hover + section .hs-wrapper img {
    opacity:1;
    transition: .5s ease; /* Mouseenter */
}

Upvotes: 1

Related Questions