Jquery，在悬停时改变颜色
[英]Jquery, changing color on hover
问题描述
This has been driving me crazy for a while, I cannot figure out what I am doing wrong. 
这让我疯狂了一段时间，我无法弄清楚我做错了什么。 I am trying to make a 4x4 grid and change the color of each square when I hover my mouse over (the color stays after the mouse leaves) but the changing color part is not working. 我正在尝试制作一个4x4网格并在我将鼠标悬停在其上时更改每个方格的颜色（鼠标离开后颜色保持不变）但是更改的颜色部分不起作用。 Here is what I have so far: 这是我到目前为止：
Changing color on hover: 在悬停时更改颜色：
This is the part where I am stuck 这是我被卡住的部分
$('.square').hover(function () {
$(this).addClass('hover');
});
10 个解决方案
解决方案1
5 2014-06-24 06:15:50
You can remove your jquery code for adding class hover and just make this css change in the file 您可以删除用于添加类悬停的jquery代码，只需在文件中进行此css更改即可
.square:hover {
background-color: red;
}
simply fixes your problem in pure Css. 只需在纯Css中解决您的问题。
Adding JsFiddle for this http://jsfiddle.net/jjeswin/nb3dB/1/ 为此http://jsfiddle.net/jjeswin/nb3dB/1/添加JsFiddle
解决方案2
2 2014-06-24 06:11:57
You need to first call makeGrid(4); 你需要先调用makeGrid(4); and then bind the event. 然后绑定事件。
also to remove class you need to modify hover function to use mouseenter and mouseleave function: 还要删除你需要修改悬停函数的类来使用mouseenter和mouseleave函数：
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
Update: for keeping the color even after mouseleave : 更新：即使在mouseleave之后保持颜色 ：
makeGrid(4);
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
});
解决方案3
1 2014-06-24 06:11:52
$('#container').on("mouseenter", '.square', function() {
$(this).addClass('hover');
});
$('#container').on("mouseleave", '.square', function() {
$(this).removeClass('hover');
});
Use event delegation for dynamically created elements. 将事件委托用于动态创建的元素。
Demo: 演示：
解决方案4
1 2014-06-24 06:14:40
Use event delegation for added dom elements dynamically . 使用event delegation动态添加dom元素。 it is the best way to do 这是最好的方法
$('#container').on('mouseenter' , ".square" , function() {
$(this).addClass('hover');
});
/* $('#container').on('mouseleave' , ".square" , function() {
$(this).removeClass('hover');
}); */
解决方案5
1 2014-06-24 06:17:54
I have updated the fiddle code http://jsfiddle.net/ZfKM8/5/ 我更新了小提琴代码http://jsfiddle.net/ZfKM8/5/
In your javascript, i've removed the hover function. 在你的javascript中，我删除了悬停功能。
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
});
in your css, instead of .hover change it to .square:hover 在你的CSS中，而不是.hover将其更改为.square：hover
.square:hover {
background-color: red;
}
解决方案6
0 2014-06-24 06:13:10
Since your boxes created dynamically to the DOM, the hover event will not be available for these boxes. 由于您的框动态创建到DOM，因此悬停事件将不适用于这些框。 In this case, event delegation will help you to attach that event 在这种情况下，事件委派将帮助您附加该事件
Try this 尝试这个
OP said the color stays after the mouse leaves OP表示the color stays after the mouse leaves
$('#container').on('mouseenter','.square',function() {
$(this).addClass('hover');
});
解决方案7
0 2014-06-24 06:14:41
here you go: http://jsfiddle.net/ZfKM8/3/ 你去吧： http ： //jsfiddle.net/ZfKM8/3/
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
$(document).on('mouseenter','.square',function() {
$(this).addClass('hover');
});
$(document).on('mouseleave','.square',function() {
$(this).removeClass('hover');
});
});
解决方案8
0 2014-06-24 06:17:15
Is there a specific reason why you're not using CSS for this? 是否有一个特定的原因，你为什么不使用CSS？
.square:hover { color: #superAwesome }
If you want the color to animate (and delay when mousing out) you can use CSS3 transition: 如果你想让颜色动画（并在外出时延迟），你可以使用CSS3过渡：
.square { transition: color 1s; }
解决方案9
0 2014-06-24 06:18:15
Try this 尝试这个
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
.hover
{
background:red;
}
</style>
</head>
<body>
<div class="square" style="width:100px;height:100px;border:1px solid"> </div>
<script type="text/javascript">
$('.square').hover(function()
{
$(this).addClass('hover');
});
$('.square').mouseout(function()
{
$(this).removeClass('hover');
});
</script>
</body>
</html>
解决方案10
0 2014-06-24 06:24:54
Make use of .toggleClass() : 使用.toggleClass() ：
makeGrid(4);
$('.square').hover(function() {
$(this).toggleClass('hover');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.