onmouseover/onmouseout與chQuery上的JQuery .hover衝突？

Question

這適用於Firefox，但不適用於Chrome或Safari。我有jQuery .hover並且工作正常，但是當我在該div內的圖像中添加了內嵌onmouseover/onmouseout時，.hover（.main-description）不會顯示。當我懸停但是文本塊（.main-description）不會顯示時，它實際上會將狀態更改爲「阻止」。

HTML：

<img src="no-hover.png" 
width="250" height="250" title="me" 
onmouseover="this.src='hover.png';" 
onmouseout="this.src=no-hover.png';"> 

JS：

$(".feature-main").hover(
    function() { 
     $(this).children(".main-description").show(); 
    }, 
    function() { 
     $(this).children(".main-description").hide(); 
    } 

任何幫助，將不勝感激。我是否應該採用不同的解決方案？將onmouseover/onmouseout移動到JS呢？

You can check out the site at here

謝謝！

Answer 1

而是去不顯眼的與mouseenter/mouseleave和刪除內聯事件處理程序：

$(".feature-main").on({ 
    mouseenter:function() { 
     $(this).attr('src', 'hover.png') 
       .find(".main-description").show(); 
    }, 
    mouseleave:function() { 
     $(this).attr('src', 'no-hover.png') 
       .find(".main-description").hide(); 
    } 
}); 

使用.find()方法，如果你的目標元素是另一個子元素的孩子。

Answer 2

嗨@Marcio爲相同的事情做兩個功能並不是一個好習慣。你需要在jQuery代碼中移動src替換。我建議是這樣的：

$(".feature-main").hover(
function() { 
    $(this).children(".main-description").show(); 
    $(this).attr('src', 'hover.png'); 
}, 
function() { 
    $(this).attr('src', 'no-hover.png'); 
    $(this).children(".main-description").hide(); 
} 

你有什麼在url節目我看不到圖像上的問題，但你的做法是不利於分開的邏輯。