我正在做我的项目，并且添加了带边框的图像。我正在悬停旋转边框，但问题是图像也在旋转。
#circle1 {
width: 210px;
height: 210px;
background-color: transparent;
border-radius: 100%;
border: 6px solid #337AB7;
border-left: 6px solid transparent;
overflow: hidden;
transform: rotate(50deg);
transition: linear 2s;
}
#circle1 .elementor-widget-container {
transform: rotate(-50deg);
background-color: transparent;
border-radius: 100%;
overflow: hidden;
transition: linear 2s;
}
#circle1:hover {
transform: rotate(410deg);
transition: linear 2s;
}
#circle1 .elementor-widget-container:hover {
transform: rotate(-410deg);
transition: linear 2s;
}
#circle1 img {
display: block;
}<div id="circle1">
<div class="elementor-widget-container">
<div class="elementor-image">
<img src="https://i.ibb.co/WkdnS0f/BIcon-1.png" class="attachment-large size-large">
</div>
</div>
</div>在这种情况下，悬停图像也在旋转，但我不想旋转图像，只有边框应该旋转。
只需将鼠标悬停在图像上，您就会看到图像也在旋转。
任何帮助深表感谢。
更改此选择器
#circle1 .elementor-widget-container:hover
至
#circle1:hover .elementor-widget-container
#circle1 {
width: 210px;
height: 210px;
background-color: transparent;
border-radius: 100%;
border: 6px solid #337AB7;
border-left: 6px solid transparent;
overflow: hidden;
transform: rotate(50deg);
transition: linear 2s;
}
#circle1 .elementor-widget-container {
transform: rotate(-50deg);
background-color: transparent;
border-radius: 100%;
overflow: hidden;
transition: linear 2s;
}
#circle1:hover {
transform: rotate(410deg);
transition: linear 2s;
}
#circle1:hover .elementor-widget-container {
transform: rotate(-410deg);
transition: linear 2s;
}
#circle1 img {
display: block;
}<div id="circle1">
<div class="elementor-widget-container">
<div class="elementor-image">
<img src="https://i.ibb.co/WkdnS0f/BIcon-1.png" class="attachment-large size-large">
</div>
</div>
</div>通过使用伪元素，可以使HTML和CSS更加简单。
#circle1 {
position: relative;
}
#circle1::after {
content: "";
display: block;
width: 210px;
height: 210px;
background-color: transparent;
border-radius: 100%;
border: 6px solid #337AB7;
border-left: 6px solid transparent;
transform: rotate(50deg);
transition: linear 2s;
position: absolute;
top: -6px;
left: -6px;
}
#circle1:hover::after {
transform: rotate(410deg);
transition: linear 2s;
}<div id="circle1">
<img src="https://i.ibb.co/WkdnS0f/BIcon-1.png" class="attachment-large size-large">
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句