jQuery mouseenter and mouseleave: block child and enlarge image

Question

My goal is as follows:

I have multiple div-elements (class = parent) that will contain images. The images should only be visibly when the user positions his mouse curser in the respective div-element. In addition, I want to enlarge the picture when the mouse curser is in the div and the picture is visible.

My idea was to create a child-element into the respective div-element. On mouseenter the child-element is set to display = 'none'. On mouseleave the child-element is set to display = 'block.

What I want to achieve is that the user can only see the parent-div when he positioned his mouse courser on the respective element. In the following code, the parent-div is green whereas the child-div is grey. So when the user moves his mouse onto one of the elements, the grey child-div should disappear and the parent div-should become visible. Therefore, the color of an element in this specific code should change from grey to green when the user positioned his mouse in the element.

I assume that I made a very basic mistake.

Thanks for your help.

$('#child_1').mouseenter(function(event) {
    let target = event.target;
    target.style.display = 'none';
  })
  .mouseleave(function(event) {
    let target = event.target;
    target.style.display = 'block'
  });

$('#child_2').mouseenter(function(event) {
    let target = event.target;
    target.style.display = 'none';
  })
  .mouseleave(function(event) {
    let target = event.target;
    target.style.display = 'block'
  });


$(document).ready(function() {
  $("[id^=parent]").hover(function() {
    $(this).addClass('transition');
  }, function() {
    $(this).removeClass('transition');
  });
});

.transition {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}

.child {
  background: grey;
  width: 100%;
  height: 100%;
  position: absolute;
  box-shadow: inset 0 0 20px #fff;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

.parent {
  background: darkolivegreen;
  width: 300px;
  height: 424px;
  position: relative;
  float: left;
  margin: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="parent_1" class="parent">

  <div id="child_1" class="child"></div>

</div>


<div id="parent_2" class="parent">

  <div id="child_2" class="child"></div>

</div>

Why do you need javascript for this? Can do it with css :hover selector — charlietfl
– charlietfl, Commented Jan 15, 2022 at 21:22
I need js because later on I want to include some more functions e.g. measure when and how often the users looked on the respective image — Nicki Maier
– Nicki Maier, Commented Jan 15, 2022 at 21:25
Ok so then please explain in more detail how this differs from what you expect. "does not work as expected" tells us little of value without more context — charlietfl
– charlietfl, Commented Jan 15, 2022 at 21:40
I edited the post but in short: I want that one mouseenter the grey div (class="child") should disappear so that the green div (class ="parent") becomes visible. On mouseleave the grey div should reappear so that the user cannot see the green div. — Nicki Maier
– Nicki Maier, Commented Jan 15, 2022 at 21:53
The problem is that for each child, you are hiding it when it is rendered and hovered on, so this leads to a cycle of going back and forth (hiding and showing). What are you trying to achieve here? Like what @charlietfl all this can be done in CSS only. If you want tracking or measure then you can still do it in JS, but don't use JS to toggle CSS properties. — Terry
– Terry, Commented Jan 15, 2022 at 21:57

Ryan Walls · Accepted Answer · 2022-01-15 22:07:13Z

1

I just created this CodePen. Is this what you're looking for?

I have simplified your JavaScript so it just adds/removes an 'active' class when you roll over a parent div:

$('.img-wrapper').mouseenter(function(event) {
    $(this).addClass('active');
})
$('.img-wrapper').mouseleave(function(event) {
    $(this).removeClass('active');
});

The animation is dealt with in the css:

.img-wrapper {
  overflow: hidden;
  background: lightblue;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 10px;
}

.img-wrapper img {
  opacity: 1;
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: all .4s ease-in-out;
}

.img-wrapper.active img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.25);
}

answered Jan 15, 2022 at 22:07

Ryan Walls

2012 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery mouseenter and mouseleave: block child and enlarge image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related