jquery가 배경색 CSS를 업데이트하지 못했습니다.

저는 그리드 생성기를 가지고 있는데, 자바 스크립트와 jQuery를 사용하여 HTML과 CSS로 표시되는 격자 블록을 생성합니다. 나는 블록의 호버 동작 (특히, 배경색 변경)을 변경하는 버튼을 설정하려고합니다. 이 작업을 수행 할 수 없으며 코드가 작동하지 않는 이유가 확실하지 않습니다. 여기에 복사하여 붙여 넣으면 매우 길다는 사과드립니다. 현재 작업에서 볼 수 있습니다 http://codepen.io/anon/pen jquery가 배경색 CSS를 업데이트하지 못했습니다.

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

$(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 = 'ABCDEF'.split(''); 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.round(Math.random() * 15)]; 
    } 
    return color; 
};

출처

2013-10-17 macsplean

코드 펜이 비어 있다고 생각합니다. ( – jbaum012

당신은 background하지 background-color 사용해야합니다. 취해서 MDN page for background-image :

CSS 배경 이미지 속성은 요소에 대해 하나 이상의 배경 이미지를 설정합니다. 이미지는 연속적인 스택 컨텍스트 레이어에 그려지며 첫 번째 지정된 레이어는 사용자에게 가장 가까운 것처럼 그려집니다. 요소의 테두리가 그 위에 그려지고 배경색이 그 아래에 그려집니다.

이것은 백그라운드 이미지의 선언으로 변환됩니다 (none 인 경우에도) 배경색 위에 위치합니다. 따라서 background-color 대신 background을 설정하면 다른 모든 속성 별 선언을 대신합니다.

출처

2013-10-17 21:18:13 PlantTheIdea

빌어 먹을. 기쁜 질문입니다. – macsplean

은 여전히 그것을 파악하지 못했습니다. : hover css에'background :;'를 추가했습니다. css ("background", get_random_color()); 아직 아무 것도 변경되지 않았습니다. – macsplean

do a' 'get_random_color()'의 반환을 위해 console.log를 사용하여 얻은 결과를 확인하십시오. – PlantTheIdea

jquery가 배경색 CSS를 업데이트하지 못했습니다.

답변

관련 문제