Question

我想将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>

Answer 1

只要将一个特定的图像作为一个类......

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"/>

Answer 2

为其指定唯一ID并为该ID定义CSS规则：

<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>

Answer 3

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

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

仅将img悬停在特定图片上？

3 个答案: