onmouseover / onmouseout 与 chrome 上的 JQuery .hover 冲突？答案

【问题标题】：onmouseover / onmouseout conflicting with JQuery .hover on chrome?onmouseover / onmouseout 与 chrome 上的 JQuery .hover 冲突？
【发布时间】：2015-12-08 15:41:16
【问题描述】：

这在 Firefox 上运行良好，但在 Chrome 或 Safari 上却不行。我有 jQuery .hover 并且工作正常，但是当我将内联 onmouseover / onmouseout 添加到该 div 内的图像时，.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

谢谢！

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

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

【讨论】：

【解决方案2】：

改为不显眼地使用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() 方法。

【讨论】：