이 기사의 예에서는 js를 사용하여 마우스 감지 이미지를 표시하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 鼠标感应의 사진 전시 示效果 <br> 몸 {<br> 배경:#fff;<br> 글꼴:small/1.5 "宋体", SimSun, serif;<br> _글꼴 크기:중간;<br> }<br> 이미지 {<br> 테두리:없음;<br> }<br> 으,<br> 리<br> h5 {<br> 목록 스타일:내부 없음;<br> 여백:0;<br> 패딩:0;<br> }<br> .추천 {<br> 배경:#999;<br> 테두리:1px 솔리드 #666;<br> 너비:600px;<br> 높이:170px;<br> 오버플로:숨김;<br> 패딩:10px;<br> 여백:0 자동;<br> 위치:상대;<br> }<br> .recomm ul {<br> 테두리:1px 실선 #fff;<br> 테두리 왼쪽:없음;<br> 높이:168px;<br> 너비:599px;<br> 오버플로:숨김;<br> *위치:절대; /* 解决IE中overflow:hidden无法正确隐藏元素的问题 */<br> }<br> .recomm 리 {<br> 부동:왼쪽;<br> 위치:상대;<br> 여백 오른쪽:-179px;<br> 높이:100%;<br> 오버플로:숨김;<br> 공백:nowrap;<br> 텍스트 정렬:가운데;<br> }<br> .recomm li img {<br> 디스플레이:블록;<br> 테두리 왼쪽:1px 단색 #fff;<br> 너비:248px;<br> 높이:168px;<br> }<br> .recomm li h5 {<br> 위치:절대;<br> 하단:0;<br> 왼쪽:0;<br> 높이:20px;<br> 너비:239px;<br> 줄 높이:20px;<br> 배경:url(../images/1_211621.png) 반복 없음;<br> 디스플레이:없음;<br> 텍스트 정렬:오른쪽;<br> 패딩 오른쪽:10px;<br> 글꼴 크기:1em;<br> 글꼴 두께:보통;<br> }<br> .recomm li:hover, .recomm .lay-on {<br> 너비:249px;<br> 여백 오른쪽:0;<br> }<br> .recomm li:hover h5, .recomm .lay-on h5 {<br> 디스플레이:블록;<br> }<br> </스타일><br> </머리><br> <br> <div class="recomm"><br> <ul> <br> <li class="hover effect"><a href="/" title="观赏该图文详细信息"><img src="/images/m01.jpg" alt="红叶传情" title= "这里是图文标题" /></a><br> <h5>红叶传情 작성자: <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5><br> <br> <li class="hover효과"><a href="/" title="观赏该图文详细信息"><img src="/images/m02.jpg" alt="야꽃绽放" title= "这里是图文标题" /></a><br> <h5>야꽃绽放 작성자: <a href="/" title="访问珊珊影视재线">珊珊影视재线</a> 2010.09.23</h5><br> <br> <li class="hovereff"><a href="/" title="观赏该图文详细信息"><img src="/images/m03.jpg" alt="往事如tea" 제목 ="这里是图文标题" /></a><br> <h5>往事如tea 작성자: <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5><br> <br> <li class="hovereff"><a href="/" title="观赏该图文详细信息"><img src="/images/m04.jpg" alt="油菜꽃开" 제목 ="这里是图文标题" /></a><br> <h5>油菜꽃开 작성자: <a href="/" title="访问七彩影视">七彩影视</a> 2010.09.23</h5><br> <br> <li class="hover effect"><a href="/" title="观赏该图文详细信息"><img src="/images/m05.jpg" alt="玫瑰情思" title= "这里是图文标题" /></a><br><h5>로즈 러브 작성자: <a href="/" title="코드 홈 방문">코드 홈</a> 2010.09.23</h5><br> <br> <li class="hovereff"><a href="/" title="이 이미지의 세부정보 보기"><img src="/images/m09.jpg" alt="작은 데이지" title = "사진 제목은 다음과 같습니다." /></a><br> <h5>리틀 데이지 작성자: <a href="/" title="산산 영화 및 텔레비전 온라인 방문">산산 영화 및 텔레비전</a> 2010.09.23</h5><br> <br> </ul> <br> </div><br> </본문><br> </div>
