如何使用圆形图像悬停css？

Question

如何使用带圆圈图像的悬停css？

我想，当光标变成黑色圆圈图像时，它会改变红色圆圈图像吗？

但是在我的代码中当光标变成div黑色圆圈图像时会改变红色圆圈图像

Fiddle

＆＃13;

＆＃13;

.test {
  background: url(http://image.free.in.th/v/2013/iw/151029115044.png);
  width: 200px;
  height: 200px;
}
.test:hover {
  background: url(http://image.free.in.th/v/2013/it/151029115107.png);
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

但是如果css不能这样做，我怎么能用javascript做到这一点？

Answer 1

纯CSS

我不是太起诉这个问题得到了很好的解释。但是，只需将黑色圆圈更改为红色圆圈，就不需要图像了。

.circle {
  width: 200px;
  height: 200px;
  background: black;
  border-radius: 50%;
  display: inline-block;
}
.circle:hover {
  background: red;
}

<a href="#linkhere" class="circle"></a>

带图像的CSS

如果您确实要保留图片，则只需将border-radius: 50%添加到当前代码中。

.test {
  background: url(http://image.free.in.th/v/2013/iw/151029115044.png);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: inline-block;
}
.test:hover {
  background: url(http://image.free.in.th/v/2013/it/151029115107.png);
}

<a href="#linkhere" class="test"></a>

Answer 2

您应在border-radius:50%

上添加div

.test{
    background: url(http://image.free.in.th/v/2013/iw/151029115044.png);
    width: 200px;
    height: 200px;
    border-radius:50%;
}
.test:hover{
    background: url(http://image.free.in.th/v/2013/it/151029115107.png);
}

<div class="test"></div>

Answer 3

关于Safari上光标的警告

<小时/> 如果您使用 img 元素，您会注意到在Safari上，光标出现在圆圈外，当光标到达图像的正方形而不是圆形时，也会应用悬停效果。但这并不会发生在Chrome上。

＆＃13;

＆＃13;

body {
  padding: 20px;
  background-color: rgba(240, 240, 240, 1);
}
div.outer-inline-box {
  display: inline-block;
  background-color: rgba(255, 255, 255, 1);
  line-height: 0px;
  margin-right: 20px;
}
.circle {
  background-color: rgba(210, 210, 210, 1);
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  cursor: pointer;
  width: 100px;
  height: 100px;
}
.circle:hover {
  background-color: red;
}

＆＃13;

<div class="outer-inline-box">
  <img class="circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
</div>
<div class="outer-inline-box">
  <div class="circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;