我正在尝试使用CSS和Javascript制作一个正方形的网格，将鼠标悬停在它们之后会改变颜色。
makeGrid(10);
$(".grid").hover(
function() {
$(this).css('color','lightgreen');
},
function() {
$(this).css('color', 'white');
}
);
//Create a grid n x n
function makeGrid(n){
for(i = 0; i < n; i++){
for(j = 0; j < n; j++){
$('.pad').append('<div class="grid">Thing</div>');
//$('.pad').append('<div class="grid"></div>');
}
}
}
和CSS
.pad{
background-color: black;
width: 1000px;
height: 1000px;
float: center;
}
.activated {
background-color: white;
}
.grid{
float: left;
width: 100px;
height: 100px;
}
如果div包含某些内容（如第一种方法所示），我似乎能够使它正常工作，但如果div内部没有任何内容（如注释掉的一个节目），则无法正常工作。我已经将div设置为在CSS中具有大小，并且由于背景颜色不同，我仍然看到它们仍然出现，但是即使我指定了实际的div，鼠标悬停甚至不再起作用。为什么这不起作用？我想念什么吗？
很难确定您的要求。我认为问题在于您正在修改color实际上是字体颜色的属性，并且想要这样的background-color属性：
$(".grid").hover(
function() {
$(this).css('background-color','lightgreen');
},
function() {
$(this).css('background-color', 'white');
}
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句