Solution 1 :

You need to use JavaScript for this.
You can use an event listener (mouseover), and when the event happens, add a newPosition class to the circle element (instead of css :hover event).

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>

Solution 2 :

You’ll need to use JS to acheive this effect

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

Problem :

I want not to returning a ball in previous position. How can I make it stay in new position?I tried many ways but it didn’t help. Will be grateful for all answers.
Here is my code:

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

Comments

Comment posted by Nava Bogatee

You’ll need to use JS to get the mouse coordinates in mousedown event, get the id of the circle object and apply CSS dynamically to the new X,Y coordinates 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’; }

By

Leave a Reply

Your email address will not be published. Required fields are marked *