时间戳

首页 > 解决方案 > 如何不只旋转图像周围的边框？

html - 如何不只旋转图像周围的边框？

问题描述

我正在处理我的项目，并且添加了带边框的图像。我在悬停时旋转边框，但问题是图像也在旋转。

#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>

在此，悬停图像也在旋转，但我不想旋转图像，只有边框应该旋转。

只需经常将鼠标悬停在图像上，您就会看到图像也在旋转。

任何帮助深表感谢。

标签： htmlcss

解决方案

更改此选择器

#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>

推荐阅读