用鼠标改变形状的颜色 hover？

Question

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

我想用鼠标 hover 将每个单独的框更改为单独的颜色。 我将如何使用 jquery 编写该语法？ 我正在尝试最终创建鼠标 hover 将在鼠标位于每个框上时创建单独的渐变的位置。 这是为了创造一种互动体验，请帮忙！

Answer 1

您忘记了 hover 状态：

.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;
}

只需将 hover 状态添加到您想要使用的颜色的选择器中。

我以.box1 &.box2 为例。 希望能帮助到你！

编辑：

根据评论，OP 希望通过 jQuery 完成此操作（找出原因），这是 jQuery 的解决方案：

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

上面的例子是for.box1，你需要做rest。

您需要在脚本中添加此代码片段，并且一旦加载了 DOM。

但这真的不是推荐的处事方式！！

Answer 2

您不需要使用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');
});

您可以查看此工作代码示例。

用鼠标改变形状的颜色 hover？

问题描述

2 个解决方案

解决方案1
1 2019-10-01 14:38:00

编辑：

解决方案2
1 已采纳 2019-10-01 14:43:56

用鼠标改变形状的颜色 hover？

问题描述

2 个解决方案

解决方案1 1 2019-10-01 14:38:00

编辑：

解决方案2 1 已采纳 2019-10-01 14:43:56

解决方案1
1 2019-10-01 14:38:00

解决方案2
1 已采纳 2019-10-01 14:43:56