-
211001_div,mouseover,mouseout,empty,hoverJQuery 2021. 10. 1. 11:30
myscript.js
/**
*
*/
function randomColor(){
//0~255
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var color="rgb("+r+","+g+","+b+")";
return color;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
//js myscript 링크 삽입
<script type="text/javascript" src="../js/myscript.js"></script>
<style type="text/css">
div {
width: 80px;
height: 80px;
float: left;
border-radius: 100px;
margin-right: 10px;
font-size: 2em;
text-align: center;
line-height: 80px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div>
<h2></h2>
<script type="text/javascript">
$("div").each(function(i,element){
$(this).css("background",randomColor()).html(i+1);
});
//div에 마우스를 올리면 해당색상으로 rgb색상출력
/* $("div").mouseover(function(){
var co=$(this).css("background-color");
$("h2").css("color",co).html(co);
});
*/
//마우스를 벗어나면 다시지우기empty()
/* $("div").mouseout(function(){
$("h2").empty();
}); */
//hover=mouseover+mouseout
$("div").hover(function(){
var co=$(this).css("background-color");
$("h2").css("color",co).html(co);
},function(){
$("h2").empty();
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
211001_div,check,radio (0) 2021.10.01 211001_clone,append (0) 2021.10.01 211001_list,select,contains (0) 2021.10.01 211001_table,button,click,score (0) 2021.10.01 211001_span,rgbColor,random,click (0) 2021.10.01