在悬停时旋转div,但不使其在悬停时旋转回来,可以通过使用CSS的transform属性来实现。具体步骤如下:
<div class="rotate-div">Hover me</div>
.rotate-div {
width: 200px;
height: 200px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 200px;
transition: transform 0.5s ease;
}
.rotate-div:hover {
transform: rotate(180deg);
}
在上述代码中,我们使用了transform属性来实现旋转效果。初始状态下,div元素不进行旋转。当鼠标悬停在div上时,通过:hover伪类选择器,将transform属性的值设置为rotate(180deg),使div元素顺时针旋转180度。
这样,当鼠标悬停在div上时,div会旋转180度,但在悬停状态结束后,div不会自动旋转回来。
推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器,并通过腾讯云控制台进行管理和操作。
产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云