Question

我是jQuery的新手，我已经在网上查询了堆栈溢出搜索，但无法正常工作。我试图在鼠标滚动时更改div的类。

我的div的html是：

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript-jQuery Sandbox Practice</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <script src="js/default.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="grid1">
                <div class="grid">Grid 01</div>
                <div class="grid">Grid 02</div>
                <div class="grid">Grid 03</div>
                <div class="grid">Grid 04</div>
            </div>
            <div id="grid2">
                <div class="grid">Grid 05</div>
                <div class="grid">Grid 06</div>
                <div class="grid">Grid 07</div>
                <div class="grid">Grid 08</div>
            </div>
            <div id="grid3">
                <div class="grid">Grid 09</div>
                <div class="grid">Grid 10</div>
                <div class="grid">Grid 11</div>
                <div class="grid">Grid 12</div>
            </div>
            <div id="grid4">
                <div class="grid">Grid 13</div>
                <div class="grid">Grid 14</div>
                <div class="grid">Grid 15</div>
                <div class="grid">Grid 16s</div>
            </div>
        </div>
    </body>
</html>

我对div的css是：

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

并悬停css。

.grid_hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

我对于div的js是：

$(document).ready(function() {
    $('.grid').hover(function() {
        $(this).toggleClass('.grid_hover');     
    });
});

提前致谢。

编辑：此外，这是网站： http://tiny.am/sandbox/Javascript-jQuery/

编辑：似乎我所要做的就是重新排序.css。之前:(没有工作）

#container {
    text-align:center;
}

.grid_hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

#grid1 {
    float: inherit;
    padding-bottom: 5px;
}

#grid2 {
    float: inherit;
    padding-bottom: 5px;
}

#grid3 {
    float: inherit;
    padding-bottom: 5px;
}

#grid4 {
    float: inherit;
    padding-bottom: 5px;
}

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

之后:(工作）

#container {
    text-align:center;
}

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

.grid_hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

#grid1 {
    float: inherit;
    padding-bottom: 5px;
}

#grid2 {
    float: inherit;
    padding-bottom: 5px;
}

#grid3 {
    float: inherit;
    padding-bottom: 5px;
}

#grid4 {
    float: inherit;
    padding-bottom: 5px;
}

Answer 1

使用toggleClass，您无需将句点添加到班级名称中。如果你删除它的工作时间：

JS Fiddle

$(this).toggleClass('grid_hover');

不会

$(this).toggleClass('.grid_hover');

作为旁注，您可以使用:hover状态使用css完成所需的操作。

Answer 2

您可以使用:hover CSS伪类来实现此目的，因此您根本不需要JavaScript。
也没有必要重复未更改的CSS属性：

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

.grid:hover {
    background-color: #3ca1ff;
}

Answer 3

在toggleClass，addClass和removeClass中，不需要课程名称之前的句号。

您还可以使用mouseover事件。

$(".grid").on("mouseover", function() {
    $(this).toggleClass("grid_hover");
});

Answer 4

这样做。如果你想用jQuery悬停

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
} 

.grid:hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

$(document).ready(function() {
    $('.grid').hover(function() {
        $(this).addClass('.grid_hover');     
    });
});

享受!!!!

Answer 5

使用 $（this）.toggleClass（“grid_hover”）而非$（this）.toggleClass（“。grid_hover”）

 $(".grid").on("mouseover", function() {
        $(this).toggleClass("grid_hover");
    });

你不需要改变类只需简单地应用这个css就可以获得所需的输出。

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

：当鼠标悬停在“.grid”下方时，hover是一个伪造类，css下面的更改将适用

.grid:hover {
    background-color: #3ca1ff;
}

使用jQuery更改div的类

5 个答案: