Question

当我将鼠标悬停在：after元素后，我遇到了一个问题。

HTML CODE：

    <div class="top_line_dropdown">
        <span class="logged_in_user">
            Admin@aaa.cc (Admin)

            <div class="top_line_dropdown_content">
                aaaa
            </div>
        </span>
    </div>

CSS

.top_line_dropdown {
  display: inline-block;
  margin-left: 22px;
}
.top_line_dropdown .logged_in_user {
  font-family: red;
  font-size: 11px;
  color: #999;
}
.top_line_dropdown .logged_in_user:after {
  content: "\f078";
  font-family: FontAwesome;
  font-weight: none;
  font-size: 9px;
  color: #999;
  padding-left: 5px;
}
.top_line_dropdown .logged_in_user .top_line_dropdown_content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  right: 50px;
}
.top_line_dropdown .logged_in_user:hover:after .top_line_dropdown_content {
  display: block;
}

当我更改：悬停而不是：hover：after 后，出现下面的框。无法弄清问题可能在哪里。

您可以在此处查看实时示例： JSFIDDLE

Answer 1

这只是因为:hover:after是一个由CSS创建的伪元素，但它没有.top_line_dropdown_content元素作为子元素。执行:hover时，会检查元素是否悬停，如果是，则会将样式应用于其子元素。我给你举个例子。我将在此代码中添加::after伪元素以使您理解。

<div class="top_line_dropdown">
    <span class="logged_in_user">
        Admin@aaa.cc (Admin)

        <div class="top_line_dropdown_content">
            aaaa
        </div>
        ::after
    </span>
</div>

在上面的例子中，:: after元素是放置元素的位置。

悬停后的框：元素之后

1 个答案: