2

Here's the challenge:

I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.

$(document).ready(function() {

  $('.dimmer').on('mouseenter', event => {
    $(this).hide();
  }).on('mouseleave', event => {
    $(this).show();

  });


});
.experience {
  background: url("cmu-110.png") no-repeat center;
  height: 110px;
  width: 110px;
  z-index: 2;
}

.dimmer {
  background: rgba(238, 238, 238, .25);
  position: relative;
  top: -128px;
  z-index: 3;
}
<div>
  <div class="experience"></div>
  <div class="dimmer"></div>
</div>

The jquery code snippet above is in a separate file and called in the html's head.

<head>
  <!--- Some head stuff like title, meta, calling css in separate file, etc --->

  <!--jquery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <script src="interaction.js"></script>

</head>

Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.

Thank you for your help!

DCeppos
  • 21
  • 3

4 Answers4

0

I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.

This post should help you: jquery .mouseover() and .mouseout() with fade

If not (if that does not work) what I would do/suggest is:

  1. When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
  2. If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.

You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...

Trust this helps.

Mr. de Silva
  • 382
  • 2
  • 11
0

You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.

$(document).ready(function() {

  $('.dimmer').on('mouseenter', () => {
    $('.dimmer').css("visibility","hidden");
  }).on('mouseleave', () => {
    $('.dimmer').css("visibility","visible");

  });


});
.experience {
  background: red;
  height: 110px;
  width: 110px;
  z-index: 0;
}

.dimmer {
  background: blue;
  position: absolute;
  top: -10px;
  height: 110px;
  width: 110px;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="experience"></div>
  <div class="dimmer"></div>
</div>
Kavindra
  • 1,697
  • 2
  • 14
  • 19
0

jQuery(document).ready(function(){
        jQuery(".dimmer").on({
  mouseenter: function () {
        jQuery(this).css('opacity', '0');
  },
  mouseleave: function () {
        jQuery(this).css('opacity', '1');
  }
 });
});
.experience {
  background: url("http://lorempixel.com/400/200/") no-repeat center;
  height: 110px;
  width: 110px;
  z-index: 2;
}

.imparant{
  position:relative;
  height: 110px;
  width: 110px;
}

.dimmer {
  background: rgba(238, 238, 238, .25);
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  z-index: 3;
  transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
  <div class="experience"></div>
  <div class="dimmer"></div>
</div>
Kamalesh M. Talaviya
  • 1,422
  • 1
  • 12
  • 26
0

You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:

.container{
  position:relative;
  height: 110px;
  width: 110px;
  background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0; 
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  transition: opacity 0.4s;
}

.container:hover::before{
  opacity: 0;
}
<div class="container"></div>

If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:

.dimmer:hover { opacity: 0 }

Otherwise you'd need to use a descendant selector:

.outerDiv:hover .dimmer { opacity: 0 }
Chris Boon
  • 1,257
  • 10
  • 10
  • You specifically asked about a jQuery way of doing this and mentioned you are learning it, so maybe you already know how to do this in CSS only, in which case I apologize. – Chris Boon Mar 30 '18 at 03:47