1

嗨，我正在尝试创建一个从黑白变为彩色的悬停，但我似乎无法弄清楚为什么我不能使用第 n 个孩子和悬停。

目前我的代码看起来像这样。 

<div class="ads125-wrap">
  <a class="ad125" href="#"><img alt="ad125" src="syteme-design-color.png"></a> 
  <a class="ad125" href="#"><img alt="ad125" src="syteme-design-bw.png"></a>
</div>


.ads125-wrap {
    height: 203px;
    position: relative;
}
.ad125 {
    margin-bottom: 0;
    margin-right: 0;
    position: absolute;

}

.ads125-wrap a.ad125 img{
 -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; 
}


.ads125-wrap a.ad125:nth-child(1) img:hover{
    opacity:0;
}

谢谢

4

3 回答 3

2

您正试图以一个类为目标nth-child，但这是行不通的。

如果所有链接都具有相同的类，那么这就足够了。

.ads125-wrap a:nth-child( add your number here) img:hover{
    opacity:0;
}
于 2013-10-29T12:27:13.420 回答
1

对不起，我一开始没有得到你想要的。如果你想获得灰度，我推荐 jQuery 插件，例如：

第一种方法：http : //gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

（你可以在网上找到很多）第二种方法是使用 css 过滤器（但你不会在每个浏览器中都得到支持）

第二种方式：http: //addcss.com/grayscale-to-color-hover-effect-using-css/

第三种方法是使用 css 过渡：

第三种方式：http : //css3.bradshawenterprises.com/cfimg/

在您的情况下，它是：

您的案例： 示例

于 2013-10-29T12:26:42.387 回答
0

Why don't you just change the class name of one of the images and let it sit behind the other image so only one image fades in and out?

http://jsfiddle.net/68Kb6/

<div class="ads125-wrap">
  <a class="ad125" href="#"><img alt="ad125" src="syteme-design-color.png"></a> 
  <a class="abcd" href="#"><img alt="abcd" src="syteme-design-bw.png"></a>
</div>
于 2013-10-29T12:22:54.823 回答