-1

我有使用问题:hover

我有 3 个图像：左、中、右

当我:hover在左右图像中使用时，它会很好

但在中心图像中它走到底部

你可以看到我在这里使用的代码

http://www.jsfiddle.net/8Eg5T/

<div class="mworks">
    <div class="img1">
    </div>
    <div class="img2">
    </div>
    <div class="img3">
    </div>
</div>

.mworks {
    height: 187px;
    width: 1087px;
    margin-top: -250px;
    margin-left: auto;
    margin-right: auto;
}
.img1 {
    background-image: url('https://dl.dropbox.com/u/35904623/img1.png');
    width: 381px;
    height: 187px;
    background-repeat: no-repeat;
    float: left;
}
.img2 {
    background-image: url('https://dl.dropbox.com/u/35904623/img1.png');
    width: 381px;
    height: 187px;
    background-repeat: no-repeat;
    float: right;
}
.img3 {
    background-image: url('https://dl.dropbox.com/u/35904623/img1.png');
    width: 381px;
    height: 187px;
    background-repeat: no-repeat;
    margin: 0px auto;
}

.img1:hover {
    background-image: url('https://dl.dropbox.com/u/35904623/imghover2.png');
    width: 381px;
    height: 381px;
    margin-top: -116px;
    background-repeat: no-repeat;


}
.img2:hover {
    background-image: url('https://dl.dropbox.com/u/35904623/imghover2.png');
    width: 381px;
    height: 381px;
    margin-top: -116px;
    background-repeat: no-repeat;


}
.img3:hover {
    background-image: url('https://dl.dropbox.com/u/35904623/imghover2.png');
    width: 381px;
    height: 381px;
    margin-top: -116px;
    background-repeat: no-repeat;


}

我该如何修复它+当鼠标悬停在图像上时我可以淡化吗

就像如果我将鼠标悬停在图像上，它会在 hoverimagw.png 中消失

当我将鼠标移到淡出之外时

我尝试使用 jquery 但没有运气

我不知道如何使用它

对不起，我的英语不好:p

4

2 回答 2

0

首先，您的宽度不足以容纳三个图像。您必须将所有 div[class=img*] 与float: left.

这是正确的CSS：

.mworks {
    height: 187px;
    width: 1143px;
    margin-top: 250px;
    margin-left: auto;
    margin-right: auto;
}
.img1 {
    background-image: url('https://dl.dropbox.com/u/35904623/img1.png');
    width: 381px;
    height: 187px;
    background-repeat: no-repeat;
    float: left;
}
.img2 {
    background-image: url('https://dl.dropbox.com/u/35904623/img1.png');
    width: 381px;
    height: 187px;
    background-repeat: no-repeat;
    float: left;
}
.img3 {
    background-image: url('https://dl.dropbox.com/u/35904623/img1.png');
    width: 381px;
    height: 187px;
    background-repeat: no-repeat;
    float: left;
}

.img1:hover {
    background-image: url('https://dl.dropbox.com/u/35904623/imghover2.png');
    width: 381px;
    height: 381px;
    margin-top: -116px;
    background-repeat: no-repeat;


}
.img2:hover {
    background-image: url('https://dl.dropbox.com/u/35904623/imghover2.png');
    width: 381px;
    height: 381px;
    margin-top: -116px;
    background-repeat: no-repeat;


}
.img3:hover {
    background-image: url('https://dl.dropbox.com/u/35904623/imghover2.png');
    width: 381px;
    height: 381px;
    margin-top: -116px;
    background-repeat: no-repeat;


}
于 2013-03-13T08:23:49.467 回答
0

您不应该使用margin: 0 auto;浮动元素之间的居中图像，因为它不起作用。所以你可以调整到居中的 img 向左浮动，你可以做的另一种方法是margin: 0 {greater than right width}px 0 {greater than left width}px 在你的例子中你可以使用它，margin: 0 382px 0 382px或者你也可以只使用 381px。

于 2013-03-13T09:05:56.510 回答