概述

我的意圖是讓用戶將鼠標懸停在圖片上，並在其頂部顯示覆蓋度降低的不透明度div。覆蓋的鋪設div的高度爲0px，並且在徘徊時應該將高度值增加到圖像高度的一半。如何使用jQuery來選擇一個正在懸停的圖像？

懸停功能是工作，但我覺得這條線是錯誤的：

編輯

嘗試登錄的curHeight變量（這是「未定義」），我認爲這條線一定要創建這個問題後：

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

來源

2017-04-16 Xander

'變種landingImg = $（本）;'絕對應該是你正在上空盤旋的圖像。我不認爲這是問題。您是否正在使用檢查員來確切地查看正在觸發的內容？你確定'最接近'是否正在返回預期的元素？ – Cfreak

@Cfreak通過我的HTML的外觀，我認爲他的正確elelment應該被選中，也許這是curHeight/2的問題？可能是 – Xander

。如果沒有自己運行完整的代碼，這很難說。我知道我使用'$（this）'來獲取當前元素。 – Cfreak

您應該使用.siblings()，而不是和您必須添加寬度到格或它不會顯示出來，使用.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>

來源

2017-04-16 14:42:50 Chiller

謝謝@Chiller你能解釋爲什麼.siblings不得不被使用和工作，而不是.closest？我不明白爲什麼它不起作用 – Xander

這是它比我更好解釋的文檔，希望它有助於:) https://api.jquery.com/siblings/，https://api.jquery.com/closest/ – Chiller

謝謝@Chiller – Xander

.clientHeight是一個DOM屬性。

變化

var curHeight = landingImg.clientHeight;

要

var curHeight = landingImg.height();

或者

var curHeight = this.clientHeight;

來源

2017-04-16 14:42:42 Andreas

謝謝@Andreas正確計算了高度。不過，我用下面的答案使div出現。 – Xander

如何使用jQuery來選擇一個正在懸停的圖像？

概述

編輯

回答

相關問題