Question

我想要在图像上叠加一个鼠标高度。

w3schools在这里有一个很好的图像叠加演示，对我想要的东西有很大帮助。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom

此处叠加层高度定义为

.container:hover .overlay {
  height: 100%;
}

是否有一种方法可以定义高度，以便假设鼠标悬停在图像上方，高度可以达到图像的高度？

Answer 1

您可以使用jQuery获得这种行为

$("div.container").mousemove(function(e){
  var avatarImg = $("#avatar");
  var avatarPosition = avatarImg.offset();
  var mousePositionX = e.pageX - avatarPosition.left;
  var mousePositionY = e.pageY - avatarPosition.top;
  var overlayNewHeight = avatarImg.height() - mousePositionY;
  $("div.overlay").height(overlayNewHeight);
});


$("div.container").mouseleave(function(){
  $("div.overlay").height(0);
});

.container {
  position: relative;
  width: 50%;
  margin-left: 100px;
  margin-top: 100px;
  border: black solid 1px;
}

#avatar {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://i.imgur.com/I80W1Q0.png" alt="Avatar" class="image" id="avatar">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</body>

鼠标悬停和鼠标高度上的图像叠加？

1 个答案: