Closed KeithChou closed 7 years ago
抱歉,暂时没有时间帮你细看。
正好我的微信公众号里有一位叫 “在深秋” 的同学似乎遇到了跟你类似的问题,而且解决问题了,因此我把他的留言转贴到这里,或许可以帮到你。
魔法哥,自从看了css揭秘,一发不可收拾。今天遇到一个问题,做平行四边形导航条,我把 a 元素当成宿主标签加上伪元素用 skew 的确可以生成我想要的,但是做 hover a 标签的时候如果给a设置变形那么字体也会跟着变。不知道你有什么好的解决方案呢?
魔法哥,解决问题啦!
其实我们改变的不是
a
上的,而是a:hover::before
上的background
。这样就不会影响内容了。希望能够帮到别人。
感谢张老师的回复,我在前不久把这个问题解决了。有个需要注意的就是,需要把伪元素再次重新放在hover伪类上。如果直接在after上套上一层hover的话,这样的效果就只有hover上去的时候才会出现平行四边形了。 SCSS代码如下:
&::after{
content:'';
position:absolute;
left:0;
background:#58a;
right:0;
bottom:0;
top:0;
z-index: -1;
@include skewX(-30deg);
}
&:hover{
&::after{
background:#64A2CB;
}
}
感谢张老师百忙之中的回复。受益匪浅。
@KeithChou 谢谢你的补充,我稍后会整理到注解中。
今天在学习《CSS揭秘》的时候遇到这样一个问题。 如果我想给平行四边形增加hover伪类,那这个伪类怎么配合伪元素写出来? 但是,如果使用嵌套的关系,在外层块级元素写一个skewX,然后在内层块级元素再写一个反向skewX,在给外层块级元素使用:hover状态时,就完美实现了。
SCSS代码如下: 嵌套方案
伪元素方案(效果错误)