仅将 img hover 应用于特定图片？答案

【问题标题】：Applying img hover to a certain picture only?仅将 img hover 应用于特定图片？
【发布时间】：2013-07-29 13:55:20
【问题描述】：

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

【问题讨论】：

标签： css image hover

【解决方案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"/>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：