如何使用jQuery选择悬停的图像？

Question

概要

我的目的是让用户将鼠标悬停在图像上，并在其顶部显示一个不透明度降低的重叠div。叠加的铺设div的高度为0px，悬停时应将高度值增加到图像高度的一半。

悬停功能正在运行，但我认为这一行是错误的：

修改

在尝试记录curHeight变量（未定义＆＃39;）后，我认为这一行必须创建问题：

var curHeight = landingImg.clientHeight;

HTML：

<div id="landing-images">
    <div class="leftLanding">
        <div class="imageCover">
        </div>
        <img class="landingImage" src="assets/landingIMG1.png">
    </div>
    <div class="rightLanding">
        <div class="imageCover">
        </div>
        <img class="landingImage" src="assets/landingIMG1.png">
    </div>
</div>

JS：

$(".landingImage").hover(function () {
        console.log("hover works");
        var landingImg = $(this);
        var curHeight = landingImg.clientHeight;
        $(this).closest('.imageCover').css("height", curHeight / 2);
    }, function () {
        $(this).closest('.imageCover').css("height", "0px");
    });

Answer 1

您应该使用.siblings()代替，并且必须将宽度添加到div或不显示，并使用.height()和.width()来获取高度和图像的宽度

$(".landingImage").hover(function () {

        var landingImg = $(this);
        var curHeight = landingImg.height();
        var curWidth = landingImg.width();
        $(this).siblings('.imageCover').css("height", curHeight / 2);
        $(this).siblings('.imageCover').css("width", curWidth);
    }, function () {
        $(this).siblings('.imageCover').css("height", "0px");
        $(this).siblings('.imageCover').css("width",  "0px");
    });

.leftLanding,
.rightLanding {
  position: relative;
}

.imageCover {
  background: green;
  position: absolute;
  top: 0;
  z-index: 111;
  opacity:.5;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-images">
  <div class="leftLanding">
    <div class="imageCover">
    </div>
    <img class="landingImage" src="https://www.w3schools.com/css/img_fjords.jpg">
  </div>
  <div class="rightLanding">
    <div class="imageCover">
    </div>
    <img class="landingImage" src="https://www.w3schools.com/css/img_fjords.jpg">
  </div>
</div>

Answer 2

.clientHeight是一个DOM属性。

更改

var curHeight = landingImg.clientHeight;

要

var curHeight = landingImg.height();

或者

var curHeight = this.clientHeight;