갤러리 게시판에 마우스 오버시 호버효과 줬는데요.
본문
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>
답글 너무 감사합니다. 위 코드 적용하니까 아무 반응이 없네요.. 호버쪽은 좀더 공부가 필요할 듯합니다.ㅜㅜ 좋은 하루 되세요.
이미지 테그에 다 호버 효과를 css로 주었으니 그렇지요 해당 id img 만 실행되도록 수정해 주셔야 합니다.
해당 id img에만 실행되도록 하는 방법을 모르겠어요..ㅜㅜ 답변 감사합니다.
<style>
.group img:hover {opacity:0.8}
</style>
<div class="group">
<img src="img.jpg">
</div>
위코드를 참고하세요
제 나름 위 코드로 해봤는데.. 방법이 잘못됐나봐요.. 저 위에 코드에서 어떻게 수정해야할지 알려주시면 안될까요..? 답변 감사합니다.
hover 를 떠나서 기본 html + css 공부를 좀더 하시는게 낫을듯 싶습니다.