旋转 <div> 元素但不旋转其中的 <p>答案

【问题标题】：Rotate <div> element but not <p> in it旋转 <div> 元素但不旋转其中的 <p>
【发布时间】：2023-01-18 20:12:26
【问题描述】：

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

body {
    div {
      width:100%;
      max-width: 250px;
      height:250px;
      background-color:red;}
     .circle:hover {
        border-radius: 50%;
        background-color:yellow;
        transform: rotate(0.5turn); 
        transition:all .35s ease;
     }
     .circle:hover p {
    pointer-events: none;
}

}

大家好，

在这里对 html 和 css 完全陌生并尝试试验一个想法但无法弄清楚

如何仅将悬停效果应用于<div>元素，但不会影响<p>标签在里面？

这个想法是我需要<p>在的中心div并保持在同一个地方（或颠倒），同时div悬停

idea visualization

【问题讨论】：

标签： css sass css-selectors hover

【解决方案1】：

您不需要旋转元素来获得图像的结果。

首先，您可以使用flexbox 属性将p 置于div 的中心，并在div 上使用:hover 来更改其边界半径。

.circle {
      width:100%;
      max-width: 150px;
      height: 150px;
      background-color: red;
      transition: all 0.5s;

      display: flex;
      justify-content: center;
      align-items: center;
}
     .circle:hover {
        border-radius: 50%;
       background-color: yellow;
     }

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

【讨论】：