1 
.ec-circle{
width: 420px;
height: 420px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-family:'Kelly Slab', Georgia, serif;
background: #dda994 url(../images/1.jpg) no-repeat center center;
box-shadow:
    inset 0 0 1px 230px rgba(0,0,0,0.6),
    inset 0 0 0 7px #d5ad94;
transition: box-shadow 400ms ease-in-out;
display: block;
outline: none;
}

上面的代码就像我想要的，但不能满足我的需要。

我想将圆圈悬停在我的图像上。

它是分辨率为 230 x 231 的图像。当悬停在图像上时，
它只会显示圆形部分。

会怎么样？

4

2 回答 2

5

您只需要在悬停时更改图像的边框半径

img:hover{border-radius:50%}

边注

而不是计算图像大小的一半并将其赋予图像边界半径值，只需赋予50%它！

在这里查看演示

于 2012-04-13T07:14:51.917 回答
1

您说图像的大小约为 230px 正方形，但您的圆形类是 420px 正方形。我想如果我理解你的问题，你应该使用小于图像大小的圆圈的宽度和高度。

关于悬停，首先，我注意到您使用图像作为背景，所以我假设您拥有的 css 类用于 div。但是div没有:hover伪类，所以不能直接用css做hover。如果你想改变一个对象对另一个事件的样式，你必须使用js。

于 2012-04-13T05:51:32.607 回答