首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在悬停时旋转div,但不使其在悬停时旋转回来,纯CSS

在悬停时旋转div,但不使其在悬停时旋转回来,可以通过使用CSS的transform属性来实现。具体步骤如下:

  1. 首先,创建一个div元素,并设置其样式和内容。
代码语言:txt
复制
<div class="rotate-div">Hover me</div>
  1. 接下来,在CSS中定义.rotate-div类,并设置其初始状态和悬停时的旋转效果。
代码语言:txt
复制
.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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券