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节目我看不到图像上的问题，但你的做法是不利于分开的逻辑。