时间戳

首页 > 解决方案 > 如何设置悬停效果（注意：只有方形边框在悬停时应该像钻石形状一样旋转，而不是图像）

html - 如何设置悬停效果（注意：只有方形边框在悬停时应该像钻石形状一样旋转，而不是图像）

问题描述

这是图像

边框应该像菱形一样旋转，但 div 元素内的图像不应该旋转。我附上了图片和代码。请通过并帮助我。

对我来说，图像也在旋转。

<!--HTML CODE-->
 <div class="section-1">
  <div class="support-sec-img">
   <img src="images\free-support.png" alt="">
  </div>
 </div>


/* CSS CODE */
.support-sec-img { 
    border: 1px solid #e5e5e5; 
    width: 73px; 
    height: 73px; 
    margin: auto; 
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.section-1:hover .support-sec-img  { 
    transform: rotate(-45deg); 
    border: 1px solid #e95c4e;
}

标签： htmlcsshover

解决方案

用 svg 更改了 img，但系统很简单。如果逆时针旋转框，则必须顺时针旋转图标。

.support-sec-img { 
    border: 1px solid #e5e5e5; 
    width: 73px; 
    height: 73px; 
    margin: auto; 
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.section-1:hover .support-sec-img  { 
    transform: rotate(-45deg); 
    border: 1px solid #e95c4e;
}

.section-1:hover .support-sec-img svg { 
    transform: rotate(45deg); 
}
 <div class="section-1">
  <div class="support-sec-img">
   <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181"/></svg>
  </div>
 </div>

推荐阅读