Question

.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的图像。当悬停在图像上时，
它只显示圆圈部分。

它将如何？

Answer 1

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

img:hover{border-radius:50%}

旁注

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

Check the demo out here

Answer 2

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

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

如何使圆圈悬停在图像上

我希望圈子悬停在我的图像上。

2 个答案:

旁注