悬停后使对象停留在新位置

Question

我不想在之前的位置回球。我怎样才能让它保持在新的位置？我尝试了很多方法但没有帮助。将不胜感激所有答案。这是我的代码：

    <link rel="stylesheet" href="circle.css">
    <title></title>
    <style>
        body {
            background-color: lightblue;
        }
        div {
            background-color: #fafafa;
            height: 400px;
            width: 400px;
            border-radius: 5px;
            border: 1px inset solid silver;
            box-sizing: border-box;
            margin-top:20px;
            float:left;
            position: relative;
        }
        .circle {
            height: 25px;
            width: 25px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            background-color:red;
            position:absolute;
        }
        .circle:hover {
            left: 1%;
        }

    </style>
</head>
<body>
    <div>
        <span class="circle"></span>
    </div>
</body>```

Answer 1

您需要为此使用 JavaScript。您可以使用事件侦听器（鼠标悬停），当事件发生时，将 newPosition class 添加到圆形元素（而不是 css :hover 事件）。

var circleElement = document.getElementsByClassName('circle')[0];
circleElement.addEventListener("mouseenter", () => {
  circleElement.classList.add("newPosition");
});

body {
  background-color: lightblue;
}
div {
  background-color: #fafafa;
  height: 400px;
  width: 400px;
  border-radius: 5px;
  border: 1px inset solid silver;
  box-sizing: border-box;
  margin-top:20px;
  float:left;
  position: relative;
}
.circle {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  background-color:red;
  position:absolute;
}
.circle.newPosition {
  left: 1%;
}

    <div>
   <span class="circle"></span>
</div>

Answer 2

这个效果需要用到JS才能实现

<html>
<head>
<title></title>
    <style>
        body {
            background-color: lightblue;
        }
        div {
            background-color: #fafafa;
            height: 400px;
            width: 400px;
            border-radius: 5px;
            border: 1px inset solid silver;
            box-sizing: border-box;
            margin-top:20px;
            float:left;
            position: relative;
        }
        .circle {
            height: 25px;
            width: 25px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            background-color:red;
            position:absolute;
        }
            /* .circle:hover {
                left: 1%;
            } */

    </style>
</head>
<body>
    <div>
        <span class="circle" id="circle"></span>
    </div>

    <script>
        const circle = document.getElementById('circle');

        document.onmousedown = function(e){
        cursorX = e.offsetX;
        cursorY = e.offsetY;

        circle.style.top = cursorY + 'px';
        circle.style.left = cursorX + 'px';
        }

    </script>

</body>
</html>

悬停后使对象停留在新位置

make an object stay in new position after hover

html

css

hover