Question

我冒险听起来很愚蠢，只是问，因为这让我发疯了。

我有一堆链接有图标的链接，但其中一个必须是图像。我可以让图像看起来很好，但悬停似乎并不想工作。

我知道这一定是我做的蠢事，但我真的可以帮上忙。

我的HTML看起来像这样

<ul class="socials">
  <li class='reverb'><a href="#"></a></li>
</ul>

我的css看起来像这样

.socials li a{
    display:inline-block;
    width:48px;
    height:48px;
    font-size:32px;
    line-height:48px;
    text-align:center;
    text-decoration:none;
    margin:0;
    padding:0;
    color:#fff;
    -webkit-transition:color 0.2s ease-out;
    transition:color 0.2s ease-out;


}


.reverb a:link{
    background: url('http://upload.wikimedia.org/wikipedia/en/archive/f/f4/20090120040123!Free_Blue_Star.jpg') no-repeat;
    background-size: 45px 45px;
}

.reverb a:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg
') no-repeat;
    background-size: 45px 45px;

}

和小提琴帮助。 http://jsfiddle.net/foj82s1z/1/

任何帮助都会很棒！

Answer 1

您需要更改以下内容：

.reverb a:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg
') no-repeat;
    background-size: 45px 45px;

}

对此：

.reverb a:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg') no-repeat;
    background-size: 45px 45px;
}

您的代码中有换行符。请检查此fixed working example。

Answer 2

摆脱背景声明中间的换行符修复了它：

.reverb a:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg') no-repeat;
    background-size: 45px 45px;
}

Answer 3

它工作正常，请确保清除空白。

.reverb a:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg') no-repeat;
    background-size: 45px 45px;
}

Answer 4

您需要清除图片网址中的空白区域

background: url('http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg') no-repeat;

在你的小提琴上，换行引起了问题。

css在悬停时切换背景图像

4 个答案: