css 旋转 < div>元素，但不在< p>其中

z9smfwbn 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(143)

<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

来源：https://stackoverflow.com/questions/75159016/rotate-div-element-but-not-p-in-it

1条答案

按热度按时间

t0ybt7op1#

不需要旋转图元即可从图像中获得结果。
首先，可以使用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>

赞(0）回复(0）举报 2023-01-22

我来回答

css 旋转 < div>元素，但不在< p>其中

1条答案

相关问题

热门标签

最新问答