Question

我在设计网站时遇到了问题。不幸的是，我已经陷入了不首先为Internet Explorer设计它的陷阱，而是陷入了更友好的浏览器，如Chrome。现在我在IE中查看它，我发现了一个我有点傻眼的问题。

菜单链接在这里 -

http://mydomain.com/apassociates/page/home

...闪烁和崩溃。如果你想看看它应该是什么样子，请在Chrome中查看。

我不是专业的网络开发人员，我怀疑这些问题对于经验较丰富的开发人员来说可能是基本的，但我实际上并不确定从哪里开始。

有没有人对这个问题有任何想法或指示？

因此，根据评论的建议尝试帮助重点，这里是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>

这里的javascript，用于替换鼠标悬停时的背景图像 -

// home links
$('div#home-1').mouseover(function () {
  $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption-wash.png)');
});

$('div#home-1').mouseleave(function () {
  $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption.png)');
});

我只包含第一个链接的代码，另一个代码只是这些代码的重复，带有不同的标识标记。

我想知道我是否会更好地将每个链接放入其固定维度的div中。可能会阻止崩溃/闪烁吗？

Answer 1

我设法隔离了您的问题并在this fiddle中解决了问题。

HTML：

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

CSS：

#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;
}

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.image'）并设置背景＆amp;不透明度只对图像而不是整个项目......

更新：

IE上的不透明度可能很棘手。更新了css和javascript，以便它也适用于IE ...小提琴也被更新了。跨浏览器的不透明度来自this post，我一直回到...... {/ p>

JavaScript mouseover / mouseleave导致某些浏览器闪烁（IE＆amp; FF）

1 个答案: