懸停功能添加到一個類，如果條件滿足

我有類「條目」懸停功能添加到一個類，如果條件滿足

<div class="entry"> 
    <h3 class="productsHover"> 
    <a><img src="image.png" /></a> 
    </h3> 
    <h3> 
    <a>Drillrigs</a> 
    </h3> 
</div>

現在父DIV中2個H3元素，當你將鼠標懸停在圖片，它通過定義一個過渡效果在CSS：

h3.productsHover img{ 
    position: relative; 
    margin-right: 10px !important; 
    left: 0px; 
    -webkit-transition: all 0.2s ease 0s; 
    -moz-transition: all 0.2s ease 0s; 
    -o-transition: all 0.2s ease 0s; 
    transition: all 0.2s ease 0s; 
} 
h3.productsHover img:hover{ 
    left: 6px; 
}

我不想將它們添加到相同的父元素（h3.productsHover）到懸停應用效果。他們（圖像和文本）應保持在單獨h3標籤

問題：那麼，如何調用圖像上懸停效果，而實際上懸停在H3文本元素？

這並不是說我不想在整個父元素（.entry）申請懸停效果，因爲它包含了許多其他的圖像和h3標籤爲好。

此外，類只應通過JS添加，而不是在它自己的HTML（正常方式）。

來源

2013-03-18 David Van Staden

綁定處理器徘徊（jQuery的支持）事件具有AA文本，處理程序將在mouseenter上添加一個類並在mouseout上移除一個類。讓css class在h3上有img做效果。

$('div.entry h3:last-child a').hover(
    function(e){ $(this).parent().prev().addClass('productsHover') }, 

    function(e){ $(this).parent().prev().removeClass('productsHover') } 
);

來源

2013-03-18 07:00:04

謝謝，但似乎沒有工作 - http://jsfiddle.net/77UGU/ – 2013-03-18 07:26:31

我看不到更多的來源，所以我可以給只是一個線索來編碼它。由於事件源和效應不是相同的元素。所以您可以：1.在第二個h3上添加懸停事件處理程序。 2.定義css以影響第一個h3。 – 2013-03-18 08:15:34

謝謝亨利，謝謝 – 2013-03-23 07:31:30

你可以這樣來做：

.entry img 
.entry:hover img

這應該讓你無論顯示在鼠標懸停在div懸停效果。

來源

2013-03-18 06:42:07

謝謝你，但正如我在質詢時說，我知道我可以申請懸停含有全父母，但父母有裏面很多圖片...因此，所有的圖像將有當效果我只想要一個特定的圖像（我懸停的那個圖像）來產生效果... – 2013-03-18 07:06:26

您只需要在選擇器中更加具體地突出顯示所需的圖像。 [.entry .productsHover img]和[.entry：hover .productsHover img] – 2013-03-18 07:09:38

@Vimal斯坦：這個答案應與下面加以改進：在H3

$(".entry img").prev().addClass("hoverClass"); // of fire hover for that element 
// same with this one .entry:hover img

http://api.jquery.com/prev/

.prev([selector ])Returns: jQuery 

Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

來源

2013-03-18 06:46:37

謝謝，但不知道如何實現這一點。你可以看看小提琴嗎？ http://jsfiddle.net/77UGU/3/ – 2013-03-18 07:30:06

我會稍後再看看。 – 2013-03-18 07:36:30

我使用jquery，但我認爲你不知道。 – 2013-03-18 16:50:29

懸停功能添加到一個類，如果條件滿足

回答

相關問題