在我的網站上，我有多個圖片，在圖片上懸停時jquery應該通過toggleClass + CSS讓圖片標題可見，但沒有這樣的運氣。我很確定問題在於jquery，但經過無數嘗試修改$this，切換.parents到.closest到.parentsUntil等，我已決定尋求幫助，請幫助我一定會感激它。。懸停功能不起作用

這裏有一個jsfiddle說明我的問題

2014-10-18 Bakajuice

我只是固定的Fiddle

有一些問題 - jQuery的沒有被列入，類imghover失蹤閉幕}，我已經調整jQuery的選擇

$(this).parents('div').find("h2").toggleClass('imghover');

正如我注意到，在您的小提琴類imghover與結束，它看起來不像完整的css被複制到原來的小提琴中。在上面的第一個小提琴中，我剛剛刪除了這個tr，並添加了缺少的}以關閉課程，因此您的一些預期css，例如transition，可能會丟失。只需添加一個轉換 - 正如我猜想的那樣是這樣的 - 調整後的第二個Fiddle看起來更好。我也刪除了var $this = $(this);，因爲它不再需要。

來源

2014-10-18 02:14:40

你的解釋很棒，謝謝:) – Bakajuice 2014-10-18 19:24:17

我遇到了一個問題，你的答案肯定有幫助，但我試圖將它合併到多個圖像中，一次只顯示一個標題，但相反它一次顯示所有標題。這是網站http://www.hitechwolf.com/wolfden/#，請幫忙。 – Bakajuice 2014-10-18 21:27:36

@Bakajuice沒問題，我正在查看網站。問題就在於這個例子中的小提琴往往只能演示一個功能，必須對實際設置進行一些調整。剛剛找到image_title.js和導致問題的imageHover（）函數。 – 2014-10-18 21:44:05

JSFiddle

更改CSS

.imghover { 
    opacity: 1; 
    transform: translateY(50px); 
    text-transform: uppercase; 
    font-style: italic; 
    transition: all 0.5s; 
} 

.imgtitle { 
    opacity: 0; 
    position: absolute; 
    color: rgba(255, 255, 255, .8); 
    width: 296px; 
    background-color: rgba(75, 85, 90, .95); 
    border: black solid 2px; 
    padding: 1.5%% 0 1.5% 0; 
    border-radius: 7.5px; 
    text-shadow: 2px 2px 1px #000; 
    pointer-events: none; 
}

有兩點需要注意：如果你使用

變換，使用過渡可以使變得更流利。在這種情況下，我更改類.imghover。

當你的光標懸停在img上時，熊貓會顯示。但是當你徘徊在熊貓，文字會動搖。所以，我添加了一個屬性pointer-events:none。震動的原因是.imgtitle節點不是img的孩子。

最後，當你懸停img時，過渡很舒服。

來源

2014-10-18 02:46:05

謝謝你使用指針事件消除了毛刺的效果，漂亮的額外獎勵我欣賞它：D – Bakajuice 2014-10-18 19:26:37

。懸停功能不起作用

回答

JSFiddle

相關問題