jQuery獲取.hover上的類的元素

$('.product-list').hover(
    $('.product-list-thumbnail ').css({'opacity': "0.2;"}) 
);

關於元素的懸停，我試圖更改另一個元素的不透明度。我嘗試過使用CSS，但這是我能找到的唯一解決方案。jQuery獲取.hover上的類的元素

我的HTML看起來像：

<article class="wrapper"> 
    <div class="product-list-thumbnail "><img src="" /></div> 
    <div class="product-list">Product details</div> 
</article>

正如我在頁面上有很多的這些。我如何才能將目前課程所在的容器內的.product-list-thumbnail類作爲目標？

謝謝！

來源

2015-12-10 PourMeSomeCode

那是不是正確的方式來使用懸停... – epascarello

@epascarello它是唯一的方法，我可以找到能夠切換當前懸停的其他元素 – PourMeSomeCode

懸停需要一個功能，這不是功能 – epascarello

我想這是一種歪曲，但在你的html語法中有一個點。「.product-list-thumbnail」試試這個。

<div class="product-list">Product details</div>

來源

2015-12-10 17:26:09 zaylen

您沒有正確使用方法hover。該方法需要兩個函數，第一個調用懸停，第二個調用blur。您也可以使用$.siblings找到.product-list-thumbnail。

$('.product-list').hover(
    function(){ 
    $(this).siblings('.product-list-thumbnail').css({'opacity': "0.2"}); 
    }, 
    function(){ 
    $(this).siblings('.product-list-thumbnail').css({'opacity': "1"}) ; 
    } 
);

來源

2015-12-10 17:28:01

首先，你可以嘗試卸下類週期看起來像這樣<div class="product-list-thumbnail ">那麼我建議改變的HTML代碼來包裝縮略圖相同元素（更好的語法）到像

<div class="product-detail"> 
    <img src="" /> 
    Product detail information 
</div>

所以，你可以像這樣通過CSS影響元素：

.product-detail:hover img {opacity: .2}

來源

2015-12-10 17:31:45 fbozo

修復行個< DIV CLASS = 「產品列表縮略圖。」 >與< DIV CLASS = 「產品列表縮略圖」 >

..和我們在這裏更換;）

$('.product-list').hover(function(){ 
    $(this).parent().find('.product-list-thumbnail').css({'opacity': '0.2'}) 
},function(){ 
    $(this).parent().find('.product-list-thumbnail').css({'opacity': '1'}) 
});

來源

2015-12-10 17:34:33 Vixed

jQuery獲取.hover上的類的元素

回答

相關問題