1

目前在我创建的 CSS 鼠标悬停效果中遇到问题。

如果您使用 chrome 看一下，http://176.32.230.21/luciaphotography.co.uk/一切正常，每当您将鼠标悬停在任何图像上时，您都会看到相关的类别图像鼠标悬停。现在在 Firefox 中，它确实可以工作，但如果您发现有两个问题：

  1. 图像未正确调整大小，您可以看到样本上的文本看起来模糊。

  2. （更重要的是）如果您注意到当您将鼠标悬停时，第一个图像会稍微变小，并且您可以在图片右侧稍微看到类别图像（您会明白我的意思）。

我不太确定发生了什么，但第二个问题并没有在 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;
}
4

0 回答 0