Question

我试图在纯粹使用CSS的HTML列表中创建特定的悬停效果。悬停时，＆＃34;背景＆＃34; nav元素应该是一半不透明但是＆＃34;前景＆＃34; li应该是完全不透明的。

＆＃13;

nav {
  font-size:2.0em;
}
nav:hover {
  background-color: #0000ff;
  opacity: 0.5;
}
nav li:hover {
  background-color: #ff0000;
  opacity: 1.0;
}

＆＃13;

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

＆＃13;

不幸的是，li悬停似乎已经获得了一半的不透明度，即使已经指定了opacity:1.0。

为什么会发生这种情况，我缺少什么？

Answer 1

这是你想要的吗？

＆＃13;

nav {
  font-size:2.0em;
}
nav:hover {
  background-color: rgba(0,0,255,0.5);
}
nav:hover li {
  opacity:0.5;
}
nav li:hover {
  background-color: #ff0000;
  opacity: 1.0;
}

＆＃13;

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

＆＃13;

修改

关于＆＃34;为什么＆＃34;部分：

根据MDN：


该值适用于整个元素，包括其内容，   即使该值不是由子元素继承的。因此，一个   元素及其包含的子元素都具有相同的不透明度   到元素的背景，即使元素及其子元素   不同的不透明度相互之间。

和


计算值：指定值，剪裁范围为[0,1]

因此，如果您将opacity:0.5设置为<nav>，则其所有子项将与＆＃34; base＆＃34;共享相同的不透明度。由于opacity只能在范围[0,1]范围内，因此<li>内的<nav>个实际不透明度不会超过0.5。

使用rgba设置<nav>的背景颜色，nav:hover li{opacity:0.5}将透明度应用于每个<li>本身，从而可以定位特定li:hover对于不同的不透明度。

Answer 2

您必须使用rgba()作为背景颜色，因为不透明度会影响子元素：

nav:hover {
  background-color: rgba(0, 0, 255, 0.5);
}

在此处查看：

nav {
  font-size:2.0em;
}
nav:hover {
  background-color: rgba(0, 0, 255, 0.5);
}
nav li:hover {
  background-color: #ff0000;
}

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

Answer 3

您也可以这样做：

＆＃13;

nav {
  font-size:2.0em;
  position: relative;
}

nav:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  background-color: #0000ff;
  z-index: -1;
}

nav:hover:after {
  opacity: 0.5;
}
nav li:hover {
  background-color: #ff0000;
}

＆＃13;

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

＆＃13;

如何分层CSS不透明度？

3 个答案: