CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Colin Bruin
Colin Bruin

Reputation: 93

jQuery mouseenter is just flickering the img

I am working on a project where I want to display an image and when the mouse moves over the image, the image disappears and info on the page appears. When the mouse moves out of the element, the image reappears. I am using mouseenter and mouseleave but the image keeps flickering if the mouse if moved even slightly. 

$(".second-div").mouseenter(function() {
  $(this).removeClass("second-div");
});
$(".second-div").mouseleave(function() {
  $(this).addClass("second-div");
});
.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="first-div">

</div>

<div class="second-div">

</div>

Here is the jsfiddle:

https://jsfiddle.net/cjbruin/t78v7tyj/

Upvotes: 2

Views: 101

Answers (3)

Hootan Alavizadeh
Hootan Alavizadeh

Reputation: 411

try this one: https://jsfiddle.net/houtan/mc4vLgev/

 $("#parentDiv").mouseenter(function() {
   var hasDiv = $( "#secondDiv" ).hasClass( "second-div" ).toString();
   $( "#result1" ).html( "is hover:  " + hasDiv );
   $("#secondDiv").removeClass("second-div");
 });
 $("#parentDiv").mouseleave(function() {
   var hasDiv = $( "#secondDiv" ).is( ".second-div" ).toString();
   $( "#result1" ).html( "is hover:  " + hasDiv );
   if (hasDiv==="false")
   {
   		$("#secondDiv").addClass("second-div");
   }
 });
#parentDiv {
  width: 300px;
  height: 200px;
}

.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentDiv">
<div id="firstDiv" class="first-div">

</div>

<div id="secondDiv" class="second-div">

</div>
</div>
<div id="result1">is hover: </div>
<script>
</script>

Upvotes: 1

Justin Heath
Justin Heath

Reputation: 401

I agree that the CSS solution is much better and cleaner. But below is what I believe you were trying to accomplish with jQuery.

In your original question, you are adding/removing the second-div class which was causing your mouse events to fire erratically.

$(".second-div").mouseenter(function() {
  $(".second-div").hide();
});
$(".first-div").mouseleave(function() {
  $(".second-div").show();
});
.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="first-div">

</div>

<div class="second-div">

</div>

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53709

There is no need for JS or jquery, you can do this with CSS. Just toggle the opacity of the top element on :hover

.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
  transition: opacity .25s;
}

.second-div:hover {
  opacity: 0;
}
<div class="first-div">
  content
</div>
<div class="second-div">
</div>

Upvotes: 3

Related Questions