JavaScript mouseover/mouseleave在某些浏览器上引起闪烁（IE&；FF）

我在设计一个网站时遇到了问题。不幸的是，我陷入了一个陷阱，没有首先为Internet Explorer设计它，而是坚持使用更友好的浏览器，如Chrome。现在我在IE中查看了一个it，我发现了一个令我有点目瞪口呆的问题

菜单链接在这里-

…忽闪忽灭。如果你想看看它的外观，请在Chrome中查看

我不是一个专业的web开发人员，我怀疑这些问题对于更有经验的开发人员来说可能是基本的，但我不确定从哪里开始

有人对这两个问题有什么想法或建议吗

---

因此，要根据评论中的建议尝试帮助关注这一点，以下是HTML-

<div id='home-pictures'>

    <a href='http://mydomain.com/apassociates/page/conservatory'>
        <div id='home-1'>
            <span class='home-link'>Traditional</span>
        </div>
    </a>
    <a href='http://mydomain.com/apassociates/page/blackbrookhouse'>
        <div id='home-2'>
            <span class='home-link'>Commercial</span>
        </div>
    </a>
    <a href='http://mydomain.com/apassociates/page/floodproof'>
        <div id='home-3'>
            <span class='home-link'>Innovative</span>
        </div>
    </a>
</div>

我只包含了第一个链接的代码，另一个代码只是这些代码的一个副本，带有不同的标识标签

---

我一直在想，把每个链接放到它自己的固定维度的div中是否会更好。这可以防止崩溃/闪烁吗？

我设法隔离了您的问题，并在中解决了它

HTML:

JavaScript:

// home links
$('div#home-1, div#home-2, div#home-3').mouseenter(function () {
    $(this).css({
        'filter' : 'alpha(opacity=50)',
        'opacity' : '0.5'
    });
}).mouseleave(function () {
  $(this).css({
        'filter' : 'alpha(opacity=100)',
        'opacity' : '1.0'
    });
});

我更改了javascript，使其不依赖于图像进行悬停，而是依赖于不透明度。这将影响图像下方的字体，因为它也在div中，但您可以在每个div中设置一个专用div（如“div.image”），并将背景和不透明度设置为仅图像，而不是整个项目

更新：

---

不透明度在IE上可能很棘手。更新了css和javascript，使其在IE上也能工作。。。小提琴也被更新了。跨浏览器不透明度是从中获取的，我一直在重复…

可以对此进行尝试-添加此元标记：

。这不是推荐的方法，但通常可以提供快速修复。现在就开始吧，谢谢！如果您提供一个小的自包含示例，其中只包含足够的代码来演示问题，而没有任何额外的内容，那么您将得到更好的答案。针对每个不同的问题都这样做。将此代码发布到问题中或JSFIDLE（jsFIDLE.net）中。这样做可能需要很多工作，但这是解决问题过程中的关键部分。页面上的背景图像为2.6mb。你的旋转木马图像跨度在“a”标记内，设置为“块”级元素。不应该有带“a”标记的块级元素。老版本的IE可能会抱怨这一点。谢谢华莱士，Opacty似乎是一条路要走，也许我只需要简化整个部分。我试图实现你发布的内容，但似乎没有奏效。但我怀疑我错过了什么。为你的帮助干杯！请注意，我只将图像的url设置为绝对，以便能够在小提琴上工作。你不必在本地这么做。如果你想的话，你仍然可以选择图像的方式，但是我认为不透明度的方式需要更少的开销。在这种情况下，

mouseenter

与

mouseleave

相结合将提供更可靠的结果。如您所见，该功能可以显著简化。现在上床睡觉，一旦你测试过它，让我知道它是怎么回事在Internet Explorer 5-9上更新了支持不透明的代码。谢谢Wallace，我会检查它并让您知道。我设法解决了这个问题。正如你所说的，我不透明度，但我注意到我留下了一些链接到：hover的样式，这会干扰Javascript，删除它会有很大帮助。我还发现本教程非常有用-shopdev.co.uk/blog/animated-menus-using-jquery/再次感谢您的帮助。

<div id="home-pictures">
    <a href="http://mikloswe.nextmp.net/apassociates/page/conservatory">
        <div id="home-1" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/devonhouse-caption.png);">
            <span class="home-link">Traditional</span>
        </div>
    </a>
    <a href="http://mikloswe.nextmp.net/apassociates/page/blackbrookhouse">
        <div id="home-2" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/carehome-caption.png);">
            <span class="home-link">Commercial</span>
        </div>
    </a>
    <a href="http://mikloswe.nextmp.net/apassociates/page/floodproof">
        <div id="home-3" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/submersible-caption.png);">
            <span class="home-link">Innovative</span>
        </div>
    </a>
</div>

#home-pictures {
    height: 250px;
}
#home-pictures {
    text-align: center;
}
#home-pictures a:link,
#home-pictures a:visited {
    color: #B43104;
    display: block;
    text-decoration: none;
}
#home-1, #home-2, #home-3 {
    margin-left: 20px;
    float: left;
    height: 256px;
    width: 285px;
    zoom: 1;
}
.home-link {
    color: #B43104;
    display: block;
    float: left;
    font-family: 'book antiqua', palatino, serif;
    font-size: 24px;
    margin-left: 15px;
    position: relative;
    top: 220px;
}

// home links
$('div#home-1, div#home-2, div#home-3').mouseenter(function () {
    $(this).css({
        'filter' : 'alpha(opacity=50)',
        'opacity' : '0.5'
    });
}).mouseleave(function () {
  $(this).css({
        'filter' : 'alpha(opacity=100)',
        'opacity' : '1.0'
    });
});