Question

您好我正在尝试创建一个悬停，从黑色和白色到颜色的变化，但我似乎无法解决为什么我不能使用nth-child和hover。

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

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

由于

Answer 1

您尝试使用nth-child定位类，但这不起作用。

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

.ads125-wrap a:nth-child( add your number here) img:hover{
    opacity:0;
}

Answer 2

抱歉，我没有得到你想要的第一名。如果你想获得灰度，我推荐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/

在你的情况下：

你的案例： EXAMPLE

Answer 3

为什么不直接更改其中一个图像的类名，让它位于另一个图像的后面，这样只有一个图像淡入和淡出？

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>

CSS Nth Child Hover

3 个答案: