2012-06-05 31 views
0

我的代碼存在問題,當我將鼠標懸停在圖片上時,圖片會變大50%,並且會在圖片上顯示文字,但當我將鼠標懸停在文字上時,圖片將進入鼠標狀態,mouseover,mouseout,mouseover。所以它會閃爍很多。當鼠標懸停在圖像的文本上時,如何禁用懸停事件?我在文中嘗試了event.stopPropagation,但它不起作用。如何在將鼠標懸停在圖像中的文本上時禁用懸停事件?

這是jsFiddle。嘗試將鼠標懸停在圖片上,然後嘗試將鼠標懸停在文字上。這就是我說的效果。我想禁用文本懸停事件。請幫幫我。

+3

你已經爲這個簡單的東西寫了太多的代碼 – 2012-06-05 05:33:11

+0

是的..對不起,這.. –

+0

你想要像你的東西,但不太複雜 – 2012-06-05 06:39:19

回答

1

我發現了這個解決方案,

我會做這樣的事情。而不是在 img元素上使用懸停效果,在父元素上執行$('。imgwall'),然後增加圖像做$(this).find('img')。 ().find('h2').show()/ hide()顯示懸停的 事件中的文本。

感謝您的期待!

+0

您應該接受您的解決方案作爲答案,以解決此問題。 +1的一個很好的解決方案,這也是在這個其他的[SO答案](http://stackoverflow.com/a/10949913/1195891)中說明。 – arttronics

0

如果您在文本框內禁止懸停事件,圖像將恢復爲小尺寸,因爲懸停時只會顯示較大的圖像。

優選地,您應該將鼠標懸停在單個元素上,使用具有非常大的透明邊框的文本框將其居中。

如果可以,請考慮使用jQuery Zoom插件。配置插件,以便在添加文本框之前放大圖片。

+0

有沒有辦法讓它禁用懸停在文本框? –

+0

由於標記在'.hover()'事件中,因此不會保留較大的圖像。例如,在此頁面上查看來自** Dipaks **的答案,例如,顯示在文本框內恢復爲較小圖像的方法。 – arttronics