javascript - onmouseover/onmouseout与chrome上的JQuery .hover发生冲突？

这在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

谢谢！

最佳答案

嗨，@ 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中显示的内容我在图像上看不到问题，但是您的方法不适用于单独的逻辑。