HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스를 움직여 연예인 사진을 밝게 또는 흐리게 처리하기(opacity)</title>
<link rel="stylesheet" href="css/01.css">
<script type="text/javascript" src="../../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/01.js"></script>
</head>
<body>
<div id="container" align="center">
<div id="firstdiv">
<img src="images/kimth.jpg" alt="김태희" />
<img src="images/iyou.jpg" alt="아이유" />
<img src="images/parkby.jpg" alt="박보영" />
</div>
</div>
</body>
</html>JS
$(document).ready(function() {
$("div#container > div#firstdiv > img").css('opacity','0.2');
/*
'opacity' 는 광도(빛)값을 나타내어주는 것이다.
'opacity' 의 값의 범위는 0.0 ~ 1.0 까지이다.
0.0 은 완전투명(안보임)이고, 1.0 은 원본의 광도값이다.
*/
$("div#container > div#firstdiv > img").hover(e => {
$(e.target).css({'opacity':'1.0', 'cursor':'pointer', 'border-radius':'50%'});
}, e => {
$(e.target).css({'opacity':'0.2', 'cursor':'default', 'border-radius':'0'});
});
}); // end of $(document).ready(function() {})------------- CSS
@charset "UTF-8";
div#container {
width: 80%;
margin: 0 auto;
/* border: 1px solid red; */
}
div#container > div#firstdiv > img {margin: 20px;}정리
- jQueryStudy -> 01_eventHandling -> chap07_opacity -> 01_opacity.html, 01.js, 01.css
