如何以悬停按钮导致另一个对象旋转和旋转的方式制作按钮？答案

【问题标题】：How to make the button in such a way that hovering it results in the rotation and spinning of another object?如何以悬停按钮导致另一个对象旋转和旋转的方式制作按钮？
【发布时间】：2021-10-17 09:27:54
【问题描述】：

我有以下代码，其中星星自动围绕新月“旋转”并悬停使其“旋转”。左侧还有一个按钮：当它悬停时，它只改变它的背景颜色和文本颜色；但是，我希望星星在按钮悬停时开始旋转（并且还希望按钮的效果，即改变其背景颜色和文字颜色，保持同步）。我尝试使用不同的代码，但我所做的一切都会导致代码更加混乱。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        position: relative;
        right: -500px;
        bottom: -150px;
      }
      .moon,
      .star {
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: 120%; /* Resize the background image to cover the entire container */
        -moz-border-radius: 50%; /* to make circle shape */
        -webkit-border-radius: 50%;
        border-radius: 50%;
      }
      .moon {
        background-color: transparent;
        background-image: url("https://i.stack.imgur.com/0bcIk.png");
        position: absolute;
        width: 200px;
        height: 200px;
        margin: 50px;
      }
      .star {
        position: relative;
        background-color: transparent;
        background-image: url("https://i.stack.imgur.com/gjbgR.png");
        width: 100px;
        height: 100px;
      }

      .rotate {
        width: 100%;
        height: 100%;
        -webkit-animation: circle 10s infinite linear;
      }
      .moon:hover .counterrotate {
        width: 50%;
        height: 50%;
        -webkit-animation: ccircle 10s infinite linear;
      }

      @-webkit-keyframes circle {
        from {
          -webkit-transform: rotateZ(0deg);
        }
        to {
          -webkit-transform: rotateZ(360deg);
        }
      }

      @-webkit-keyframes ccircle {
        from {
          -webkit-transform: rotateZ(360deg);
        }
        to {
          -webkit-transform: rotateZ(0deg);
        }
      }

      .moon:hover .counterrotate {
        animation-name: inherit;
        animation-duration: 5s;
        transition-duration: 0.2s;
      }

      button {
        background-color: white;
        color: black;
        text-align: center;
        padding: 16px 32px;
        font-size: 16px;
        cursor: pointer;
        border: 2px solid green;
        display: inline-block;
        transition-duration: 0.3s;
        position: relative;
        left: -350px;
        border-radius: 50px;
        bottom: -100px;
      }

      button:hover {
        background-color: green;
        color: white;
        display: inline-block;
        border: 1px solid white;
        transition: 0.5s;
      }
    </style>
  </head>
  <body style="background-color: green">
    <div class="moon">
      <div class="rotate">
        <div class="counterrotate">
          <div class="star"></div>
        </div>
      </div>
    </div>

    <button>Hover</button>
  </body>
</html>

我该怎么做？

【问题讨论】：

只有 CSS 你不能'选择'和'操作'元素（1）取决于对其他元素（2）的操作，这些元素与元素（后代，DOM树下的兄弟）没有关系（ 1）你想要操纵。你可以用javascript来做。
@MihaiT：用 JS 也可以。你能发布一个答案来说明如何做到这一点吗？（我将对其进行编辑以包含 JavaScript 标记）
首先，您需要自己尝试一下。分享您的尝试（使用 js），我们可以从那里为您提供帮助
@MihaiT：对不起。我是初学者，刚开始接触HTML/CSS，不懂JS。
不幸的是，StackOverflow 不是一个免费的代码制作社区。那里还有其他社区可以帮助您（收费）。在这里，我们可以帮助您调试/改进您的代码，但不能为您制作代码。也许你很幸运，有人会为你编写代码，但我对此表示怀疑。

标签： javascript html css button hover

【解决方案1】：

如果我正确理解了要求，您不需要 Javascript。

但是，CSS 目前无法为悬停元素之前的兄弟元素设置样式（它无法“返回”DOM）。但它可以为悬停元素之后的兄弟元素设置样式。

所以第一个变化是把按钮元素放在月亮元素之前。现在，当按钮元素悬停时，我们可以使用 + 组合器选择它的直接兄弟元素，然后我们可以从那里选择旋转和月亮元素，为它们提供旋转和旋转所需的动画。（在这种情况下，我们在问题的代码中保留了旋转的定义，并引入了旋转动画以保持星星围绕其中心旋转）。

现在，当按钮悬停时，星星会旋转（移动一个大圆圈）和旋转（围绕它自己的中心旋转）。

这个 sn-p 也使星星在悬停时旋转，并且在没有悬停时没有任何运动。显然，您可以更改样式以获得您想要的样式。此外，还删除了反向旋转和 -webkit- 前缀，只是为了简化事情（并且您不希望 -webkit- 没有设置 vanilla 设置以及某些浏览器可能无法解释它）。

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      position: relative;
      right: -500px;
      bottom: -150px;
    }
    
    .moon,
    .star {
      background-position: center;
      /* Center the image */
      background-repeat: no-repeat;
      /* Do not repeat the image */
      background-size: 120%;
      /* Resize the background image to cover the entire container */
      border-radius: 50%;
    }
    
    .moon {
      background-color: transparent;
      background-image: url("https://i.stack.imgur.com/0bcIk.png");
      position: absolute;
      width: 200px;
      height: 200px;
      margin: 50px;
    }
    
    .star {
      position: relative;
      background-color: transparent;
      background-image: url("https://i.stack.imgur.com/gjbgR.png");
      width: 100px;
      height: 100px;
      transform: rotate(0deg);
    }
    
    button:hover+.moon .star,
    .star:hover {
      animation: spin 5s infinite linear;
    }
    
    @keyframes spin {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
    
    button:hover+.moon .rotate {
      width: 100%;
      height: 100%;
      animation: circle 10s infinite linear;
    }
    
    @keyframes circle {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
    
    button {
      background-color: white;
      color: black;
      text-align: center;
      padding: 16px 32px;
      font-size: 16px;
      cursor: pointer;
      border: 2px solid green;
      display: inline-block;
      transition-duration: 0.3s;
      position: relative;
      left: -350px;
      border-radius: 50px;
      bottom: -100px;
    }
    
    button:hover {
      background-color: green;
      color: white;
      display: inline-block;
      border: 1px solid white;
      transition: 0.5s;
    }
  </style>
</head>

<body style="background-color: green">
  <button>Hover</button>
  <div class="moon">
    <div class="rotate">
      <div class="star"></div>
    </div>
  </div>

</body>

</html>

【讨论】：

无法获得更好的答案！谢谢！ :)