Question

目前我在创建的css鼠标悬停效果方面遇到了问题。

如果您使用chrome查看此http://176.32.230.21/luciaphotography.co.uk/一切正常，只要您将鼠标悬停在任何图像上，就会看到相关的类别图像鼠标悬停。现在在Firefox中，它确实有效但如果你注意到有两个问题：

图片未正确调整大小，您可以看到样本上的文字看起来模糊。
（更重要的是）如果您注意到鼠标悬停时，第一张图片会稍微变小，您可以在图片右侧略微看到类别图像（您将看到我的意思）。

我不太确定发生了什么，但第二个问题不会发生在Internet Explorer中，尽管第一个问题确实存在。我认为这是因为我使用的是IE9而不是10。

我正在使用最新版本的chrome和FF。

<div id="widget1" class="widget-container">         
<div class="textwidget">
    <a href="#">
        <img class="bottom" src="images/editorial.png">
        <img class="top" src="images/front1.png">
    </a>
</div>

.widget-container {
    height: 155px;
    width:155px;
    padding-right:2px;
    padding-left: 2px;
    float: left;
    position: relative;
    margin: 0 auto;
}

.widget-container img.top:hover {
    opacity: 0;
}
.widget-container img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.bottom {
    max-width: 155px;
    max-height: 155px;
}

.top {
    max-width: 155px;
    max-height: 155px;
}

css鼠标悬停效果bug只在firefox中

0 个答案: