Изменить цвет фигуры с помощью мыши? - PullRequest
Новая
       1

Изменить цвет фигуры с помощью мыши?

1 голос
/ 01 октября 2019 
<html>

    <head>

        <title>Interactive Playground</title>

        <style>
            html, body {
                height: 100%;
                margin: 0px;
                position:relative;
                align-items: center;
            }

            .box1{
                height: 100%;
                width:100%;
                position:absolute;
                background-color: palevioletred;
            }

            .box2{
                height: 85%;
                width:90%;
                background-color: lightpink;
                display:block;
                position:absolute;
            }

            .box3{
                height: 65%;
                width:80%;
                background-color: pink;
                display:block;
                position:absolute;
            }

            .box4{
                height: 45%;
                width:70%;
                background-color: navajowhite;
                display:block;
                position:absolute;
            }

            .box5{
                height: 30%;
                width:60%;
                background-color: goldenrod;
                display:block;
                position:absolute;
            }

            .box6{
                height: 15%;
                width:50%;
                background-color: darkgoldenrod;
                display:block;
                position:absolute;
            }

        </style>

    </head>

    <body>

         <div id="box" class="box1"></div>
         <div id="box" class="box2"></div>
         <div id="box" class="box3"></div>
         <div id="box" class="box4"></div>
         <div id="box" class="box5"></div>
         <div id="box" class="box6"></div>

         <script>

         </script>

    </body>

</html>

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

Ответы [ 2 ]

1 голос
/ 01 октября 2019

Вам не нужно использовать jQuery . Вместо этого вы должны использовать :hover. Вы также должны прочитать о CSS псевдоклассах . В вашем примере кода вы можете сделать это следующим образом: 

.box1 {
   height: 100%;
   width:100%;
   position:absolute;
   background-color: palevioletred;
}

.box1:hover{
   background-color: blue;
}

.box2 {
     height: 85%;
     width:90%;
     background-color: lightpink;
     display:block;
     position:absolute;
}

.box2:hover {
   background-color: green;
}

Если вы все еще хотите использовать jQuery по любой причине, есть много способов сделать это. Вы можете попробовать это так: 

$('.box1').mouseenter(function(){
   $(this).css('background', 'green');
});

$('.box1').mouseleave(function(){
   $(this).css('background', 'palevioletred');
});

Вы можете проверить это пример рабочего кода .

1 голос
/ 01 октября 2019

Вы забыли состояния наведения: 

.box1 {
    height: 100%;
    width:100%;
    position:absolute;
    background-color: palevioletred;
}

.box1:hover {
  background-color: green;
}

.box2 {
    height: 85%;
    width:90%;
    background-color: lightpink;
    display:block;
    position:absolute;

}

.box2:hover {
  background-color: blue;
}

Просто добавьте состояния наведения к вашим селекторам с цветом, который вы хотите использовать.

Я сделал .box1 & .box2 в качестве примера. Надеюсь, что это поможет!

РЕДАКТИРОВАТЬ:

Согласно комментариям, OP хочет, чтобы это было сделано с помощью jQuery (поймите, почему), вот решение с jQuery: 

$( ".box1" ).hover(function() {
  $( this ).css( "background-color", "red" );
});

Пример выше для .box1, вам нужно сделать все остальное.

Вам нужно добавить этот фрагмент кода внутри скрипта и после загрузки DOM.

Но это действительно не рекомендуемый способ ведения дел !!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...