如何在内容 css 之后添加悬停效果？

Question

我想在悬停 h1 的后面内容时显示一个名为 div 的点菜单。我已经尝试了以下代码，但没有用。

h1{
    font-size: 20px;
    font-weight: 400;
    color: #3d3d3d;
    margin-top:50px
}
 h1:after{
    content: "EE";
    float: right;
    font-size: 35px;
    padding-right: 20px;
}
.dot-menu{
    float: right;
    background-color: #3d3d3d;
    color: #FFFFFF;
    font-size: 16px;
    padding: 10px;
    font-weight: 400;
    font-family: "Montserrat Light", "Open Sans";
    position: relative;
    top:-10px;
    opacity:0;
}
h1:after:hover .dot-menu{
    opacity:1;
}

<h1>Henry Little</h1><h3 class="dot-menu">about</h3>

Answer 1

在使 .dot-menu 成为 h1 的子项后看到它正在工作。

h1{
    font-size: 20px;
    font-weight: 400;
    color: #3d3d3d;
    margin-top:50px
}
 h1:after{
    content: "EE";
    float: right;
    font-size: 35px;
    padding-right: 20px;
}
.dot-menu{
    float: right;
    background-color: #3d3d3d;
    color: #FFFFFF;
    font-size: 16px;
    padding: 10px;
    font-weight: 400;
    font-family: "Montserrat Light", "Open Sans";
    position: relative;
    top:-10px;
    opacity:0;
}
h1:hover .dot-menu{
    opacity:1;
}

<h1>Henry Little<span class="dot-menu">about</span></h1>

Answer 2

Your selector h1:after:hover .dot-menu is wrong.

此 selector 将查找 .dot-menu 元素，该元素是 h1 的后代，但事实并非如此。第二，你不能 select 悬停在伪元素上的另一个元素。

您需要稍微更改一下代码。考虑以下 HTML：

<h1>Henry Little
  <span class="icon">&vellip;</span>
  <span class="dot-menu">about</span>
</h1>

使菜单开启器和菜单成为同一个父元素的子元素。然后你可以在图标悬停时显示菜单与兄弟姐妹 (+ ) selector.

h1 .icon:hover + .dot-menu{
  opacity:1;
}

h1{
  font-size: 20px;
  font-weight: 400;
  color: #3d3d3d;
  margin-top:50px;
  position: relative;
}

h1:after {
  display: block;
  clear: both;
  content: '';
}
h1 .icon {
  float: right;
  font-size: 35px;
  padding-right: 20px;
  position: relative;
  cursor: pointer;
}
.dot-menu {
  float: right;
  background-color: #3d3d3d;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px;
  font-weight: 400;
  font-family: "Montserrat Light", "Open Sans";
  position: relative;
  top:30px;
  opacity:0;
  right: 0;
}
h1 .icon:hover + .dot-menu{
  opacity:1;
}

<h1>Henry Little
  <span class="icon">&vellip;</span>
  <div class="dot-menu">about</div>
</h1>

如何在内容 css 之后添加悬停效果？

How to put a hover effect to an after content is css?

html

css

pseudo-element