jQuery mouseenter and mouseleave: block child and enlarge image-CodePudding

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" >

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

</div>


<div id="parent_2" >

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

</div>

CodePudding user response：

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);
}