目標與多個元素具有相同類名的單個元素

我試圖實現一個懸停效果，它將單個元素作爲目標，但將類名稱作爲多個元素。例如，我只想要將鼠標懸停在特定元素上時發生懸停效果。但是，代碼工作，如果我上空盤旋，剩餘的元素，這是我迄今爲止..目標與多個元素具有相同類名的單個元素

$(".thumb-overlay-content").hover(function() { 
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut'); 
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn'); 
}, function() { 
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn'); 
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut'); 
});

感謝

來源

2013-10-23 AC88

你n eed的方式來選擇特定的元素..給它另一個類，一個ID，也許選擇它的索引... –

是否有一個原因，你不能單獨使用CSS來完成這個：'.thumb-overlay-content：懸停' –

您必須爲父元素添加另一個屬性，以瞭解它的屬性。 F.E.數據ID，或只是身份證... – Legionar

您應該使用一個識別器或在您的jQuery更精確的查詢。

的id屬性添加到您的對象，並且：

$("#myIdName").hover(function() { 
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut'); 
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn'); 
}, function() { 
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn'); 
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut'); 
});

看看jQUery selecto R鍵建立一個更精確的查詢

來源

2013-10-23 13:52:44 Federico

和鏈接調用/緩存。 – Virus721

多一點背景下將是有益的，但你試過toggleClass ？

$(".thumb-overlay-content").hover(function() { 
    $(this).parent('.thumb-overlay-desc').toggleClass('rotateIn rotateOut'); 
}, function() { 
    $(this).parent('.thumb-overlay-desc').toggleClass('rotateIn rotateOut'); 
});

順便說一句，$（這）已經瞄準觸發元件，其他元件用相同的類名稱不應該改變。

來源

2013-10-23 13:53:15 Paul

我不完全確定你的上下文，但你應該只能從parent()函數中刪除'.thumb-overlay-desc'。

我也不完全確定你的問題，這將有助於看到它的行動。不過，試試這個：

$(".thumb-overlay-content").hover(function() { 
    $(this).parent().removeClass('animated rotateOut').addClass('animated rotateIn'); 
}, function() { 
    $(this).parent().removeClass('animated rotateIn').addClass('animated rotateOut'); 
});

我還結合removeClass()和addClass()在同一線路上，因爲沒有必要重新識別選擇，使用jQuery可以疊加功能。

來源

2013-10-23 13:58:40

你需要使用jQuery中的.hover函數。這使您可以專門定位您懸停的項目。與上面的答案不同，您不需要使用.parent函數。

$(".thumb-overlay-content").hover(function() { 
    $(this).removeClass('rotateOut').addClass('rotateIn'); 
}, function() { 
    $(this).removeClass('rotateIn').addClass('rotateOut'); 
});

也沒有必要刪除.animated類，如果你只是要立即加回。

見工作jsfiddle

在一個側面沒有，我不知道jquery是必要的，如果你調整你的CSS它可以完成一個簡單的.thumb-overlay-content:hover類

來源

2013-10-23 14:02:06

你也可以對你的類更具體，這樣你就可以使用'toggleClass'添加/刪除一個類來獲得相同的效果 –

目標與多個元素具有相同類名的單個元素

回答

相關問題