时间戳

首页 > 解决方案 > 这个冗长的伪类组合是一个有效的陈述吗？

html - 这个冗长的伪类组合是一个有效的陈述吗？

问题描述

这是我的代码：

.fontmenu .fontlist{
        position: absolute;
        bottom:30px;
        display:none;

    }

.fontbutton button:hover .fontmenu .fontlist{
        display:block;
    }
<div class="fontmenu">
    <div class="fontbutton">
        <button>fonts</button>
    </div>
    <div class="fontlist">  
        <div onclick="font(1)">Arial</div>
        <div onclick="font(2)">Courier</div>
        <div onclick="font(3)">Verdana</div>
        <div onclick="font(4)">sans</div>
    </div>
</div>

CSS 不工作。当我悬停按钮时，列表不可见。我想知道是否.fontbutton button:hover .fontmenu .fontlist{}有效。

标签： htmlcsscss-selectorshoverpseudo-class

解决方案

这是你用过的：

.fontbutton button:hover .fontmenu .fontlist{ }

这行不通

为什么它不起作用？继续阅读。我会解释。但首先，让我们看看什么会起作用。

让我们尝试使用一些选择器：

.fontbutton:hover + .fontlist {}

这将起作用

让我们看看它的实际效果：

.fontmenu .fontlist {
  bottom: 30px;
  display: none;
}

.fontbutton:hover + .fontlist {
  display: block;
}


/* No need to include the wrapper fontmenu div,
just target the siblings, ie, fontbutton and fontlist.
The + selector must be used, otherwise, the browser will
think fontlist is the child of fontbutton */
<div class="fontmenu">
  <div class="fontbutton">
    <button>fonts</button>
  </div>
  <div class="fontlist">
    <div onclick="font(1)">Arial</div>
    <div onclick="font(2)">Courier</div>
    <div onclick="font(3)">Verdana</div>
    <div onclick="font(4)">sans</div>
  </div>
</div>

请注意，即使我们将鼠标悬停在按钮的右侧，列表也会变得可见。这是因为我们的目标是 divfontbutton而不是<button>元素。因此，当我们悬停 div 而不是按钮时，浏览器使列表可见。

怎么修？

我们需要稍微改变一下html。

.fontmenu .fontlist {
  display: none;
}

button:hover + .fontlist {
  display: block;
}
<div class="fontmenu">
  <button>fonts</button>
  <div class="fontlist">
    <div onclick="font(1)">Arial</div>
    <div onclick="font(2)">Courier</div>
    <div onclick="font(3)">Verdana</div>
    <div onclick="font(4)">sans</div>
  </div>
</div>

看我删除了这个.fontbutton类并<button>把.fontlist. 因此，现在，您可以看到列表仅在我们悬停按钮时可见。

现在你会说我可以在你的 CSS 中添加一些选择器。但我没有，因为你无法定位<button>然后向下移动到.fontlist单独的div中。

.fontbutton > button:hover ? .fontmenu > .fontlist{ }

我们将在 的地方遇到问题?。

  1. 首先，我们需要下到.button.
  2. 向上移动到.fontbutton。
  3. 添加+选择器并切换到.fontmenu.
  4. 下移至.fontlist。

在我们下移到 之后.button，我们不能再上去.fontbutton。

CSS 没有父选择器之类的东西。

所以，很明显，我们不能那样使用它。

推荐阅读