Question

我试图让黄色齿轮的图像位于带有黄色边框和白色背景的div内，然后在悬停时，齿轮变为白色，背景变为黄色。我目前正在设置第一个图像作为div的背景，然后使用div：hover来改变悬停时的背景，但是间距等不起作用，边框也没有正确地绕过图像。是否可以将图像放在链接内而不是div的背景中？以下是我使用的代码：

HTML：

<div id="settings">
    <a href="settings.html"></a>
</div>

CSS：

#settings {
    border: 4px solid #ffff00;
    padding: 10px 20px 10px 20px;
    background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}

#settings:hover {
    background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}

有什么想法吗？

Answer 1

虽然不是很有效但是可能。您可以拥有两个图像，并根据悬停显示和隐藏它们：

<强> HTML

<div class="button_link">
  <a href="settings.html"><img src="http://www.placecage.com/50/50"/></a>
  <a href="settings.html"><img src="http://www.placecage.com/60/50"/></a>
</div>

<强> CSS

.button_link a:last-child{
  display: none;
}

.button_link:hover a:first-child{
  display: none;
}

.button_link:hover a:last-child{
  display: block;
}

FIDDLE

如果您可以发布一个小提示，重新使用您正在使用的图像的问题，那么使用CSS可能会更有效地执行此操作，并且不会涉及其他HTML

<强>更新

我就是这样做的，只用CSS：

NEW FIDDLE

Answer 2

您可以改用：

#settings a{
   display:block;
   width:100px; /* adjust your width */
   height:100px;/* adjust your height */
   border: 4px solid #ffff00;
   padding: 10px 20px 10px 20px;
   background: url(img/cog_yellow.png) 0 0 no-repeat;
}

#settings a:hover {
   background: url(img/cog_white.png) 0 0 no-repeat;
}

div中的图像在悬停时会发生变化吗？

2 个答案: