CODEWITHSUNDEEP
jquerymouseenter
Elisimo
Elisimo

Reputation: 77

How to make jquery mouseenter affect only one DIV

I'm new to jquery. I'm building a image portfolio. Basically i have 2 div classes. And inside the main class i have an image. When i enter with my mouse on the main DIV, i get the second div to animate. It works good, but when i copy the main DIV 2 or more time, on MOUSEENTER every DIV is triggered. How can i make that only the DIV that mouse is on to trigger, and that the others stay unaffected. Thank you. I will give you both my jquery and html code. And provide an image of what my problem is.

jQuery:

$(document).ready(function () {
    $(".main").mouseenter(function () {
        $(".blue").animate({
            left: '0px',
            opacity: '0.6',

        }, "slow");
    })

    $(".main").mouseleave(function () {
        $(".blue").animate({
            left: '-250px',
            opacity: '1.0',

        }, "slow");
    });
});

HTML:

<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
    </div>

    <a href="#">
        <img src="uploads/windows.jpg" alt="windows">
    </a>
</div>

The problem image

Upvotes: 2

Views: 586

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Use hover() to combine both event handler. Also set this context to select .blue div inside the hovered element. Use stop() for clearing the animation queue.

$(document).ready(function() {
  $(".main").hover(function() {
    $(".blue", this).stop().animate({
      left: '0px',
      opacity: '0.6',
    }, "slow");
  }, function() {
    $(".blue", this).stop().animate({
      left: '-250px',
      opacity: '1.0',
    }, "slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

You can use .find() or pass the context to find the blue element relative to the hovered element

$(document).ready(function() {
  $(".main").mouseenter(function() {
    $(this).find(".blue").stop().animate({
      left: '0px',
      opacity: '0.6',
    }, "slow");

  })

  $(".main").mouseleave(function() {
    $(this).find(".blue").stop().animate({
      left: '-250px',
      opacity: '1.0',
    }, "slow");

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>

Upvotes: 1

Related Questions