HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인물 사진 보이기/감추기( hover )</title>
<link rel="stylesheet" href="css/05.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/05.js"></script>
</head>
<body>
<div id="container">
<div id="firstdiv"></div>
<div id="seconddiv">
<div id="face"></div>
<div>
<div id="comment"></div>
</div>
</div>
</div>
</body>
</html>JS
$(document).ready(function(){
const arr_person = [{name:"김태희", filename:"kimth.jpg", address:"서울 강동구", email:"kimth@gmail.com"}
,{name:"아이유", filename:"iyou.jpg", address:"서울 강서구", email:"iyou@gmail.com"}
,{name:"박보영", filename:"parkby.jpg", address:"서울 강남구", email:"parkby@gmail.com"}];
let html = ``;
arr_person.forEach(item => {
html += `<span class='buttons'>${item.name}</span>`;
}) // end of arr_person.forEach(item => {})----------
$("div#firstdiv").html(html);
/////////////////////////////////////////////////////////////////////////////////
/*
선택자.hover(function(){} , function(){});
==> 첫번째 function(){} 은 mouseover 에 해당하는 내용을 기재하는 것이고,
두번째 function(){} 은 mouseout 에 해당하는 내용을 기재하는 것이다.
*/
/*
$(".buttons").bind("hover", function(event){}); 은 에러이다.
왜냐하면 hover 는 이벤트가 아니라 jQuery 에서 제공해주는 함수(메소드)
*/
$("div#container > div#firstdiv > span.buttons").hover(function(e){ // mouseover
const i = $("div#container > div#firstdiv > span.buttons").index($(e.target));
// console.log(i); // 0 1 2
$('div#face').html(`<img src='images/${arr_person[i].filename}'/>`);
// html 초기화
html = `<ol>
<li><span>성명</span>${arr_person[i].name}</li>
<li><span>주소</span>${arr_person[i].address}</li>
<li><span>이메일</span>${arr_person[i].email}</li>
</ol>`;
$("div#comment").html(html);
$(e.target).css({"background-color":"navy", "color":"white"});
$("div#seconddiv").show();
}, function(e){ // mouseout
$(e.target).css({"background-color":"", "color":""});
$("div#seconddiv").hide();
}) // end of $("div#container > div#firstdiv > span.buttons").hover--------------------
}) // end of $(document).ready(function(){})-----------------CSS
@charset "UTF-8";
div#container {
/* border: solid 1px gray; */
width: 80%;
margin: 0 auto;
text-align: center;
}
div#container > div#firstdiv > span.buttons {
display: inline-block;
width: 100px;
border: solid 2px orange;
margin: 20px;
padding: 5px;
background-color: yellow;
color: #ff0000;
font-size: 15pt;
cursor: pointer;
}
div#container > div#seconddiv > div#face > img {
width: 119px;
height: 149px;
border-radius: 50%;
}
div#container > div#seconddiv > div:nth-child(2) {
border: solid 0px blue;
display: flex;
}
div#container > div#seconddiv > div:nth-child(2) > div#comment {
border: solid 0px red;
text-align: left;
width: 250px;
margin-top: 10px;
margin: 0 auto;
}
div#container > div#seconddiv > div:nth-child(2) > div#comment > ol > li {
line-height: 200%;
}
div#container > div#seconddiv > div:nth-child(2) > div#comment > ol > li > span {
border: solid 0px gray;
display: inline-block;
width: 60px;
}정리
- jQueryStudy -> 01_eventHandling -> chap05_mouseover_mouseout_hover -> 05_hover.html, 05.js, 05.css
