如何使懸停在一個 div 上以觸發另一個 div 中的更改，但不影響使用 Jquery 的另一個 div。這是例子
我知道這個選項，但它對我不起作用
$(function() {
$(".single-holder-image").hover(function() {
$(".read-more-a-black", this).css('color', '#a2d0ba');
}, function() {
// on mouseout, reset the background colour
$(".read-more-a-black", this).css('color', '');
});
});
也許我需要更改 html 結構
<div class="big-holder">
<div class="single-post-holder">
<a class="" href="#">
<div class="single-holder-image">
<img src="https://i.picsum.photos/id/717/200/300.jpg?hmac=OJYQhMLNcYlN5qz8IR345SJ7t6A0vyHzT_RdMxO4dSc" alt="">
</div>
</a>
<div class="description-holder">
<p class="category name "></p>
<a class="read-more-a-black" href="#"><h5>Title 2</h5></a>
<a class="read-more-a-black-p" href="#">lorem test test test test</a>
<div class="pdf-holder">
<p>Tools:</p>
</div>
</div>
</div>
<div class="single-post-holder">
<a class="" href="#">
<div class="single-holder-image">
<img src="https://i.picsum.photos/id/717/200/300.jpg?hmac=OJYQhMLNcYlN5qz8IR345SJ7t6A0vyHzT_RdMxO4dSc" alt="">
</div>
</a>
<div class="description-holder">
<p class="category name "></p>
<a class="read-more-a-black" href="#"><h5>Title 2</h5></a>
<a class="read-more-a-black-p" href="#">lorem test test test test</a>
<div class="pdf-holder">
<p>Tools:</p>
</div>
</div>
</div>
</div>
此外，當滑鼠懸停在標題上以觸發影像并獲得轉換：縮放時，我是否能夠執行相同的操作？
uj5u.com熱心網友回復：
使用$(this)在.hover()事件處理程式回呼。
這樣只會選擇發生事件的元素。
之后，一些JQuery的DOM遍歷與.parents()和.find()和問題解決了：
$(document).ready(function() {
$(".single-holder-image").hover(function() {
$(this).parents(".single-post-holder").find(".read-more-a-black").css('color', '#a2d0ba');
}, function() {
// on mouseout, reset the background colour
$(this).parents(".single-post-holder").find(".read-more-a-black").css('color', '');
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346578.html
上一篇：在css檔案中完全宣告高度和顏色，但在index.html檔案中它沒有按設計顯示
下一篇：居中：從邊界到容器末端？[復制]