заставить объект оставаться в новом положении после наведения - PullRequest
Новая
       44

заставить объект оставаться в новом положении после наведения

1 голос
/ 08 мая 2020

Я не хочу возвращать мяч в предыдущую позицию. Как мне заставить его оставаться в новом положении? Я пробовал много способов, но не помогло. Буду признателен за все ответы. Вот мой код: 

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

Ответы [ 2 ]

2 голосов
/ 08 мая 2020

Для этого нужно использовать JavaScript. Вы можете использовать прослушиватель событий (наведение курсора мыши), и когда событие произойдет, добавьте класс newPosition к элементу круга (вместо css: событие зависания). 

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>
1 голос
/ 08 мая 2020

Вам нужно будет использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...