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

Question

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

<!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>

我该怎么做？

Answer 1

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

但是，CSS 目前无法设置悬停元素之前的同级元素的样式（它不能 'go back up' DOM）。但它可以为悬停元素之后的同级元素设置样式。

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

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

此代码段还使星星在悬停时旋转，并且在没有悬停时没有任何移动。显然，您可以更改样式以获得您想要的样式。还删除了 counterrotation 和 -webkit- 前缀，只是为了简化事情（并且您不希望 -webkit- 没有设置香草设置以及某些浏览器可能无法解释它）。

<!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>

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

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

html

javascript

css

button

hover