-1

我想将img hover专门添加到顶部横幅而不是其他图像。有什么代码可以让你这样做吗？感谢您的任何回复。

<HTML><HEAD>
<TITLE>Cascade Studios™&lt;/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>
4

3 回答 3

2

只需给那个特定的图像一个类...

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-29T05:50:09.970 回答
1

给它唯一的 ID 并为该 ID 定义 CSS 规则：

<HTML><HEAD>
<TITLE>Cascade Studios™&lt;/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-29T05:49:48.057 回答
0

您可以为顶部横幅图像提供 id 并在其上应用 :hover 伪类，如下所示：

img#top_banner:hover {
//hover styles comes here
}
于 2013-07-29T05:55:20.900 回答