Question

这适用于Firefox，但不适用于Chrome或Safari。我有jQuery .hover并且工作正常但是当我在内部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

嗨@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();
}

您在网址中显示的内容我没有在图片上看到问题，但您的方法对单独的逻辑不利。

Answer 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()方法。

onmouseover / onmouseout与Chrome上的JQuery .hover冲突？

2 个答案: