2013-02-14 117 views
0

HTML:图像(图像悬停)

<div class="image"><a href="$ENTRY_URL$" title="$TITLE$ online"> 
    <img class="avkas rad2" src="$IMG_URL1$" width="130px"> 
    <img src="/images/star.png" class="img"><div class="text2"> <b> $FILTER1_VALUE$</b> 
    </div><div class="text"> <b> $OTHER1$</b> 
    </div> 
    </a></div> 

CSS

.image { 
position:relative; 
float:left; /* optional */ 

} 


.image .img { 
position:absolute; 
top:-13px; /* in conjunction with left property, decides the text position */ 
right:-12px; 
width:45px; /* optional, though better have one */} 
.image .text { 
position:absolute; 
top:0px; 
right:1px; 
color: #000; } 
.image .text2 { 
position:absolute; 
top:3px; 
left:3px; 
    color: white; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7);} 
.image a {text-decoration:none;} 
.image a:hover {color:#FF00FF;} 

现在我想这个形象: http://new-hard.do.am/movie/images/lb-movie-short-poster-hover.png到apear像悬停时,用户用鼠标在我的主图像..我不想要..这个图像取代我的主要图像只是为了出现在它上面 这个图像:

<img class="avkas rad2" src="$IMG_URL1$" width="130px"> 
+0

我试图.avkas:悬停{背景:网址(http://new-hard.do.am/movie/images/lb-movie-short-poster-hover.png); }但没有工作 – 2013-02-14 20:56:12

回答

0

您需要制作另一幅图像,然后将其悬停在此图像上方。然后

.image:link 
{ 
background-image: "specify the path of the image"; 
} 

.image:hover 
{ 
background-image: "specify path of the image that you want to hover"; 
}