갤러리 게시판에 마우스 오버시 호버효과 줬는데요. 채택완료
img {
opacity: 1.0;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 0.8;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 1.0;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 0.8;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">
<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>
</body>
</html>
갤러리 게시판에 리스트 이미지만 호버가 적용되야 하는데 본문에 이미지들 전부 호버가 적용되버리네요.
어디를 수정해야할까요..? ㅜㅜ
답변 4개
<!DOCTYPE html>
<html>
<head>
<style>
.group img {
opacity: 1.0;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
.group img:hover {
opacity: 0.8;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<div class="group">
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_fjords.jpg" alt="Fjords" width="170" height="100">
</div>
<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>
</body>
</html>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
<style>
.group img:hover {opacity:0.8}
</style>
<div class="group">
<img src="img.jpg">
</div>
위코드를 참고하세요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인