相信我,前端真的有毒,好玩,且上瘾
今天加班的时候发现一个特别好笑的效果,(好吧,其实是自己基础知识没学好,然后写错引发的笑剧,但是,真的戳到了我的笑点,不笑的拒绝diss)
起个名字:论:hover::before与:hover ::before的买家秀与卖家秀
先贴张图,本来,我以为是我实现的效果是这样的:(请忽略马赛克,看蓝色的小条条)
这个效果是这样子的,鼠标经过时,整张卡片会呈现出阴影效果,并在卡片的左上角显示出一个蓝色的小条条。我第一反应只想到了用hover来设置鼠标经过呈现的阴影效果,后来在前辈的指点下才想起来还有::before这种东西,深深地鄙视了一把自己以后,机智的我马上把画出来的小蓝条样式名改成了.xxx:hover ::before,然后神奇的事情发生了,请看买家秀:
哦豁,刺激,我只想要一个小蓝条,结果他出来了1,2,3,4,5,6,7,7个小蓝条,数了一下,我这个小卡片的代码由8个div构成,小蓝条基于最外层div定位,所以,显示出来的7个小蓝条,其实是外层div下的div,也就是外层div的子元素的小蓝条,为什么会显示其子元素的小蓝条呢?
罪魁祸首就是它,那个空格!
正确答案是——:hover::before 而不是——:hover ::before,空格无罪,但就是不能要空格,因为这是在调用它的子元素,老子被儿子篡位啦!
哈哈,其实上面这段解释都是我看了正确答案以后强行解释的,只有最后一句话才是真的,如果有强行解释错了,请狠狠地指教我, biu~