HTML&CSS新手求助：仅对<div>应用悬停效果，不影响内部<p>元素

首先你要知道，你写的CSS用了嵌套选择器（body里套div和.circle），这是SCSS的语法，普通浏览器不支持，得先改成标准CSS写法。然后核心问题是父元素旋转时，子元素会继承这个变换，要让<p>保持中心且不跟着转（或仅上下颠倒），可以这么处理：

1. 修复CSS语法错误 #

把嵌套结构展开成标准CSS，同时给父元素加flex布局确保<p>始终居中：

body {
  /* 让整个页面居中显示容器，可选 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.circle {
  width: 100%;
  max-width: 250px;
  height: 250px;
  background-color: red;
  /* 用flex让内部p标签居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 把过渡效果放到初始状态，动画更流畅 */
  transition: all .35s ease;
}

2. 让<p>保持原位（不旋转） #

当父元素旋转180度（0.5turn），给<p>反向旋转180度，抵消父元素的旋转效果：

.circle:hover {
  border-radius: 50%;
  background-color: yellow;
  transform: rotate(0.5turn);
}

.circle p {
  margin: 0;
  transition: all .35s ease;
}

.circle:hover p {
  transform: rotate(-0.5turn); /* 反向旋转，让文字保持原样 */
  pointer-events: none;
}

3. 若希望<p>仅上下颠倒（文字跟着转） #

如果不需要文字保持原样，只需要它始终在中心，那去掉<p>的旋转样式即可，父元素的flex布局会自动让它保持中心。

完整可运行代码 #

HTML #

<body>
  <div class="circle">
    <p>projects</p>
  </div>
</body>

CSS #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.circle {
  width: 100%;
  max-width: 250px;
  height: 250px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .35s ease;
}

.circle:hover {
  border-radius: 50%;
  background-color: yellow;
  transform: rotate(0.5turn);
}

.circle p {
  margin: 0;
  transition: all .35s ease;
}

.circle:hover p {
  transform: rotate(-0.5turn);
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者P N