Question

我试图给予悬停效果，但无法理解如何给它。我正在做这个简单的方法，我对悬停效果知之甚少。

HTML：

<div class="social">    
            <ul>
                <li><a href="#"><img src="http://i.imgur.com/nHJ6Loa.png" alt="facebook" class="fbhover"></a></li>

        </ul>

CSS for facebook icon：

.fbhover:hover {
    background-image:url(http://i.imgur.com/bdMNHnw.png);
    background-repeat:no-repeat;
}

Answer 1

您无法用背景图片替换<img>元素。然后，您可以：

[Demo]使用<img>元素并使用src和onmouseover事件更改其onmouseout属性。我不喜欢这个解决方案，因为我觉得它应该只做CSS。
[Demo]不要使用任何<img>元素。相反，请使用空元素，并使用您在悬停时更改的background-image设置样式。我不喜欢这种解决方案，因为在你的情况下，你的图像不是装饰性的。
[Demo]将<img>与默认图片一起使用。当您悬停包装元素时，隐藏图像并使用background-image设置包装元素的样式。我选择这个解决方案。

Demo

HTML：

<ul>
    <li><a href="#" class="fbhover"><img src="http://i.imgur.com/nHJ6Loa.png" alt="facebook" /></a>
    </li>
</ul>

CSS：

.fbhover{
    display: inline-block;
}
.fbhover:hover {
    background-image:url(http://i.imgur.com/bdMNHnw.png);
    background-repeat:no-repeat;
}
.fbhover:hover > img{
    visibility: hidden;
}

Answer 2

<img>元素不使用background-image CSS属性，因此您应该使用<div>来实现此效果。尝试将HTML更改为：

<ul>
    <li><a href="#"><div class="fbhover"></div></a></li>
</ul>

然后，将CSS更改为：

.fbhover {
    display: inline-block;
    width: 26px;
    height: 27px;
    background: url('http://i.imgur.com/nHJ6Loa.png') no-repeat 0 0;
}

.fbhover:hover {
    background-image: url('http://i.imgur.com/bdMNHnw.png');
}

See a demo here.

请注意，您使用的两张图片尺寸不同。 “默认”一个是26像素宽，27像素高，而“悬停”一个是24像素x 25像素。因此，当悬停时，您会看到图像位置发生轻微变化。

Answer 3

你无法使用css切换图像的来源，但是你可以影响背景图像，所以你需要设置，首先用你的起始背景图像设置一个div元素，然后用css切换它

有关示例，请参阅CSS: Change image src on img:hover。

Answer 4

您需要在悬停时为图像指定宽度和高度。这是 demo

.fbhover:hover {
http://l2.yimg.com/ts/api/res/1.2/_QJTbkK9JEp2XwjwJcoMEg--/YXBwaWQ9eWhvbWVydW47cT04NTtzbT0xO3c9MjUwO2g9MTQx/http://media.zenfs.com/en-US/video/video.abcnewsplus.com/49e95f54ffbd408cb1b752a69899014d);
    background-repeat:no-repeat;
    height:300px;
    width:300px;
}

Answer 5

以图像为背景制作一个div（大小合适）（并给它一个id或类）。然后，在你的CSS中，只需使用悬停事件做你想做的任何事情。

Answer 6

最后，我尝试了这种方法，它也有效。

<div class="social">    
            <ul>
                <li class="facebook"><a href="#"></a></li>

        </ul>                               
            </div>


.social li.facebook {
    background-image:url(img/facebook.png);
    background-repeat:no-repeat;
    width:27px;
    cursor:pointer;
}

.social li.facebook:hover {
    background-image:url(img/facebookhover.png);
    background-repeat:no-repeat;
}

CSS社交图标悬停效果？

6 个答案:

See a demo here.