所以我試圖在現有的 div 上顯示一個隱藏的 div，但只顯示滑鼠懸停的 div。我有一個顯示錯誤的 jsfiddle。在懸停時，它顯示所有未隱藏的 div，但我只希望當前 div 可見，而不是所有的 div。
風格：
background-color: blue;
color: red;
width: 100px;
height: 100px;
position: relative;
}
.productHover{
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 100%;
display: none;
color: white;
}
HTML：
Apple
<div class="productHover">
0.1%
</div>
</div>
<div class="product">
Apple2
<div class="productHover">
0.2%
</div>
</div>
<div class="product">
Apple3
<div class="productHover">
0.3%
</div>
</div>
查詢：
function() {
$('.productHover').show();
}, function() {
$('.productHover').hide();
}
);
jsfiddle：https ://jsfiddle.net/spaLo6zf/12/
div 具有相同的類名，我試圖一次只顯示一個 productHover，現在同時顯示。
uj5u.com熱心網友回復：
將您的 jQuery 更改為：
$('.product').hover(
function() {
$(this).find('.productHover').show();
},
function() {
$(this).find('.productHover').hide();
}
);.product {
background-color: blue;
color: red;
width: 100px;
height: 100px;
position: relative;
}
.productHover {
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 100%;
display: none;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
Apple
<div class="productHover">
0.1%
</div>
</div>
<div class="product">
Apple2
<div class="productHover">
0.2%
</div>
</div>
<div class="product">
Apple3
<div class="productHover">
0.3%
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387807.html
標籤：查询