我被困在一個 jquery 屬性上。我想通過屬性滑鼠進入和滑鼠離開來產生過度效果，但我有幾張影像，當滑鼠進入這個時，我只想在 1 上執行此操作。
我試圖放置幾個類名，但懸停效果不會出現在所有影像上，而不僅僅是在活動影像上。
<div id="villas">
<div class="l_villa">
<a href="./img/villa1.png" alt="villa1">
<img id="lv1" src="./img/villa1.png" alt="villa1">
</a>
<div class="lvinfos1">
Lorem ipsum dolor sit amet.
</div>
</div>
<div class="l_villa">
<a href="./img/villa2.png" alt="villa2">
<img class="lv1" src="./img/villa2.png" alt="villa2">
</a>
<div class="lvinfos2">
Lorem ipsum dolor sit amet.
</div>
</div>
$(document).ready(function(){
$(".l_villa").mouseover(function(){
$(".lvinfos1").slideUp("slow");
});
$(".l_villa").mouseleave(function(){
$(".lvinfos1").slideDown('slow');
});
});
uj5u.com熱心網友回復：
要執行您需要的操作，請將所有.lvinfosN元素更改為具有相同的類。我會建議.lvinfos。然后在事件處理程式中使用this關鍵字來參考引發事件的元素，并使用 DOM 遍歷來定位相關元素向上或向下滑動。在這種情況下find()會起作用。
請注意，可以通過使用hover()方法和來縮短代碼slideToggle()。此外，stop()當用戶反復將滑鼠移入/移出元素時，還值得呼叫以防止多個影片排隊。
$(document).ready(function() {
$('.l_villa').hover(function() {
$(this).find('.lvinfos').stop(true).slideToggle("slow");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="villas">
<div class="l_villa">
<a href="./img/villa1.png" alt="villa1">
<img id="lv1" src="./img/villa1.png" alt="villa1">
</a>
<div class="lvinfos">
Lorem ipsum dolor sit amet.
</div>
</div>
<div class="l_villa">
<a href="./img/villa2.png" alt="villa2">
<img class="lv1" src="./img/villa2.png" alt="villa2">
</a>
<div class="lvinfos">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/481423.html
標籤：javascript html jQuery
上一篇：使用鍵盤而不是按鈕計算的輸入值