你怎么写这个SASS兼容?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
基本上我只是复制这个在一个图像中淡化另一个(found here.)的例子
他的JSFiddle例子:qazxsw poi
然而他的例子是直接的CSS,我正在SASS的一个项目上工作,我不确定如何正确翻译它。
请注意,在我下面的示例中,img悬停不能正常工作(两个图像都显示出来,并且没有发生翻转淡入淡出动作)
我的CodePen:http://jsfiddle.net/Xm2Be/3/
我试过了
http://codepen.io/leongaban/pen/xnjso
但是:抛出SASS编译错误,下面的代码可行
.try-me img:last-child & .tryme img:last-of-type
然而它吐出了CSS,这对我没有帮助:
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
Sass不需要嵌套。如果不需要拆分选择器,就不觉得有义务这样做。
http://codepen.io/leongaban/pen/xnjso
如果您将样式应用于图像,然后将特定样式应用于最后一个类型,那么这就是嵌套它时的样子:
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
上述两者都不适合我,所以。
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
只对元素很好玩,你可以选择所有你喜欢的类,但这可以通过元素来处理。所以说你有以下树:
last-of-type
要使用<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
类到达最后一个div,使用middle
不起作用。
我的解决方法是简单地改变last-of-type
所属的元素类型
希望它可以帮助某人,让我花一点时间来解决这个问题。
嘿,你为什么不只使用CSS?你可以删除所有的JS,我的意思是悬停是支持回到ie6。我猜你知道平板电脑上没有悬浮事件。
我的意思是你需要为图像设置一个区域..但我发现它使用完全,特别是如果你想要一个href。
somethingelse
只是我的想法..