Question

我有一个网格生成器，它使用Javascript和jQuery在网格中生成用HTML和CSS显示的块。我正在尝试设置一个按钮，它将改变块的悬停行为（具体来说，改变它们的背景颜色）。我无法做到这一点，我不知道为什么我的代码不起作用。我会在这里复制并粘贴它，我很抱歉它很长。你可以在这里看到它：http://codepen.io/anon/pen

HTML

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
 <title> Odin #2 by Max Pleaner </title>
<link rel="stylesheet" type="text/css" href='stylesheet.css'>
</head>

<body>
<p> Welcome to my Odin Project #2 page. This is me showing off my basic JS and jQuery skills. If you move your mouse through the blocks you can see frogs come out of hiding. If you press the clear button below you can select a new number of blocks to fill the same space.</p>
<button id="button"> Generate a number of blocks of your liking that will position themselves to all fit in the 960px by 960px grid.  </button>
<button id="button2"> <strike> Click here to generate new blocks and make hovering on blocks produce random colors.</strike> Why isn't this button working?! It's drawing new blocks fine, but not changing the :hover style as intended. </button>



<div id="square_holder">
</div>
<img src="Q6w802v.jpg" alt="froggy" ></img>
</body>

</html>

CSS

body {
background-color: grey;
}

p {
color: aqua;
}

#square_holder {
width: 960px;
}

.block {
background-color: green;
display:inline-block;
border: 1px solid black;
width: 232px;
height: 232px;
}

.block:hover {
background-color: blue;
//background-image:url("Q6w802v.jpg");
background-size: contain;
}

JS

$(document).ready(function(){

  draw_grid(4);



  $('#button').click(function(){
      get_input();
  });

 $('#button2').click(function(){
        get_input();
        $('.block:hover').css("background-image", "none").css("background-color", get_random_color());

    }); 

});
 var draw_grid = function (blocks) {
        var totalno = Math.pow(blocks, 2);
        var dimension = (960 - 1 -(blocks * 2))/blocks;
        for(var i = 0; i < totalno; i++){
            $("#square_holder").append("<div class='block' id=" + i + "></div>");
        };
    $(".block").css("height", dimension).css("width", dimension);
    }


var get_input = function(){
        alert('Do you want to change the number of boxes?<b></b>');
    $('#square_holder').empty();
    var user_entry = prompt("What number do you choose?"); 
    alert("Watch in awe as the grid fills ..... ");
    draw_grid(user_entry);
    }


 var get_random_color = function() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
};

Answer 1

您需要使用background，而不是background-color。取自MDN page for background-image：

CSS background-image属性为元素设置一个或多个背景图像。图像在连续的堆叠上下文层上绘制，第一个指定的图像被绘制为好像它最接近用户。然后在元素的边框上绘制元素的边框，并在它们下面绘制背景颜色。

这转化为背景图像的声明（即使没有）将位于背景颜色的顶部。因此，如果您设置background而不是background-color，它将取代所有其他特定于属性的声明。

jquery无法更新背景色css

1 个答案: