通过 CSS 将鼠标悬停在父元素上时显示 :after

Show :after when hovering over the parent element via CSS(通过 CSS 将鼠标悬停在父元素上时显示 :after)

问题描述

当我将鼠标悬停在父元素本身上时，是否可以 display:block; :after 伪元素?

Is it possible to display:block; the :after pseudo-element when I hover over the parent element itself?

#myDiv{
   position:relative;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:red;
}
#myDiv:after{
   position:absolute;
   content:"";
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:blue;
}

我累了:

#myDiv:hover #myDiv:after{
    display:block;
}
#myDiv:hover + #myDiv:after{
    display:block;
}
#myDiv:hover > #myDiv:after{
    display:block;
}

但运气不好，这里有一个 fiddle.

Yet no luck, here's a fiddle.

推荐答案

改成#myDiv:hover::after

您可以使用 :after 或 ::after 但在选择器模块 (3) 中声明后者现在旨在用于将它们与伪类

You can use either :after or ::after but in the selectors module (3) it states that the latter is now intended to be used to distinguish them from pseudo-classes

这篇关于通过 CSS 将鼠标悬停在父元素上时显示 :after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！