이전의 셀 이미지를 덮어 쓰는 롤오버 이미지 이전의 셀 이미지를 덮어 쓰는 중 -

각 테이블 셀에 하이퍼 링크가있는 롤오버 이미지를 만들려고합니다. 그러나 어떤 이유에서든 셀을 오버라이드 할 때 전에 . :. 각 셀은 반복 이미지가됩니다. 처음으로 코드를 작성하면 코드가 제대로 작동합니다. 이것은 완전히 파란에서이다. 다음은 인접한 두 개의 셀에 대한 이미지 코드입니다 - 어떤 이유로 든 나를 위해 어떻게되는지, 두 번째 셀은 첫 번째 셀 이미지로 계속 표시됩니다. HTML의 큰 덩어리없이이전의 셀 이미지를 덮어 쓰는 롤오버 이미지 이전의 셀 이미지를 덮어 쓰는 중 -

<table style="width: 655px; height: 630px; border: 2px dotted black;"> 
<tbody> 
<tr align="center">  
<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css"> 
.rollover a {display: block; 
    width: 210px; 
    height: 155px; 
    background-image: url(IMG1a);} 
.rollover a:hover{display: block; 
    width:210px; 
    height: 155px; 
    background-image: url(IMG1b);} 
</style><div class="rollover"> <a href="link1"></a></div></td> 

<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css"> 
.rollover a {display: block; 
    width: 210px; 
    height: 155px; 
    background-image: url(IMG1a);} 
.rollover a:hover{display: block; 
    width:210px; 
    height: 155px; 
    background-image: url(IMG1b);} 
</style><div class="rollover"> <a href="link1"></a></div></td></tr></tbody></table>

출처

2012-11-08 user1809757

함께 제공되는 관련 HTML을 게시 할 수 있습니까? –

테이블 HTML도 포함하도록 변경했습니다! 그게 도움이 되니? – user1809757

난 당신이 그대로 페이지에이 있다고 가정입니다. <style> 요소의 범위가 페이지의 일부로 지정되지 않습니다. 따라서 페이지에이 두 가지 스타일 요소가있는 경우 마지막 문은 첫 번째 문을 무시하고 두 div에 영향을줍니다. 별도의 파일에 더 나은

<style type="text/css"> 
#first-div.rollover a {display: block; 
    width: 210px; 
    height: 155px; 
    background-image: url(IMG1a);} 
#first-div.rollover a:hover{ 
    background-image: url(IMG1b);} 

#second-div.rollover a {display: block; 
    width: 185px; 
    height: 131px; 
    background-image: url(IMG2a);} 
#second-div.rollover a:hover{ 
    background-image: url(IMGb);} 
</style> 

<div class="rollover" id="first-div"> 
    <a href="link1"></a> 
</div> 
<div class="rollover" id="second-div"> 
    <a href="link2"></a> 
</div>

그리고 항상 포함하여 <style> 당신의 <head> 태그에, 또는 :

은 당신이 id처럼, 각 div 또는 a 특정 선택기를 제공해야이 문제를 해결하려면 !

출처

2012-11-08 16:13:38

고맙습니다. 완벽하게 작동합니다! – user1809757

큰 소리로 들으세요! –

이전의 셀 이미지를 덮어 쓰는 롤오버 이미지 이전의 셀 이미지를 덮어 쓰는 중 -

답변

관련 문제