有没有办法让它悬停在按钮上只旋转它的内部？

Question

我正在为我的网站进行设计。我添加了一个设置按钮，我想让按钮内的齿轮图标在您将鼠标悬停在按钮上时旋转。唯一的问题是我不知道怎么做。我尝试到处寻找答案，但找不到任何有帮助的东西。

我已经尝试过让整个按钮旋转，这似乎有效，但齿轮图标最终稍微偏离中心。

button {
  width: 8vw;
    height: 8vw;
    border: none;
    background: #353535;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
    border-radius: 50%;
    color: white;
}

button:hover {
    transform: rotate(180deg);
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0..1,-50..200" />
<button>
  <span class="material-symbols-outlined">settings</span>
</button>

https://jsfiddle.net/hon5ex48/

Answer 1

您可以将

span

内的

button

作为旋转效果的目标，但仍将

:hover

伪类保留在

button

上。 例如：

button {
  width: 8vw;
    height: 8vw;
    border: none;
    background: #353535;
    display: flex;
    align-items: center;
    justify-content: center;
  border-radius: 50%;
    color: white;
}

button > span {
    transition: .5s;
}

button:hover > span {
    transform: rotate(180deg);
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0..1,-50..200" />
<button>
  <span class="material-symbols-outlined">settings</span>
</button>