僅將img hover應用於某張圖片？

-1

我想將img hover專門添加到頂部橫幅並且沒有其他圖像。有沒有任何代碼可以讓你做到這一點？謝謝你的回覆。僅將img hover應用於某張圖片？

<HTML><HEAD> 
<TITLE>Cascade Studios™</TITLE> 
<style> 
body 
{ 
background-image:url('http://icpy.webs.com/boxes/background.png'); 
background-repeat:repeat-y 
position:center; 
} 
img { 
    opacity: 1.0; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
} 
img:hover { 
    opacity: 0.5; 
    transition: opacity .55s ease-in-out; 
    -moz-transition: opacity .55s ease-in-out; 
    -webkit-transition: opacity .55s ease-in-out; 
} 
</style> 
</HEAD> 
<BODY> 

<center> 
<img src="http://icpy.webs.com/boxes/cascade.png"/><br> 
<div id="main_box" style="position:absolute; left:120px; top:190px; z-index:1;"> 
<img src="http://icpy.webs.com/boxes/left.png" name="inlineframe" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"/></div> 


</BODY> 
</HTML>

來源

2013-07-29 raininggalaxies

給它唯一的ID，並定義CSS規則爲ID：

<HTML><HEAD> 
<TITLE>Cascade Studios™</TITLE> 
<style> 
body 
{ 
background-image:url('http://icpy.webs.com/boxes/background.png'); 
background-repeat:repeat-y 
position:center; 
} 
img { 
    opacity: 1.0; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
} 
#top_banner:hover { 
    opacity: 0.5; 
    transition: opacity .55s ease-in-out; 
    -moz-transition: opacity .55s ease-in-out; 
    -webkit-transition: opacity .55s ease-in-out; 
} 
</style> 
</HEAD> 
<BODY> 

<center> 
<img id="top_banner" src="http://icpy.webs.com/boxes/cascade.png"/><br> 
<div id="main_box" style="position:absolute; left:120px; top:190px; z-index:1;"> 
<img src="http://icpy.webs.com/boxes/left.png" name="inlineframe" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"/></div> 


</BODY> 
</HTML>

來源

2013-07-29 05:49:48

只要給一個特定的圖像需要的類別...

img { 
    opacity: 1.0; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
-webkit-transition: opacity 1s ease-in-out; 
} 
.topbanner:hover { 
    opacity: 0.5; 
    transition: opacity .55s ease-in-out; 
-moz-transition: opacity .55s ease-in-out; 
-webkit-transition: opacity .55s ease-in-out; 
}

在你的HTML

然後

<img class="topbanner" src="http://icpy.webs.com/boxes/cascade.png"/>

來源

2013-07-29 05:50:09 KyleK

您可以給頂部橫幅圖像e並應用：懸停僞類，如下所示：

img#top_banner:hover { 
//hover styles comes here 
}

來源

2013-07-29 05:55:20 web2008

僅將img hover應用於某張圖片？

回答

相關問題