html - 悬停时，CSS 不透明度不会在 li 内部工作

Question

不透明度:1；当我将鼠标悬停在链接上时似乎不起作用，尽管像 background:red 这样的命令似乎起作用了。谁能解释为什么会这样以及如何使不透明度起作用？

CSS:

.secondBlock{
    border-bottom: solid black 1px;
    height:260px;
    text-decoration: none;
}
.secondBlock:hover li{
    opacity:0.5;}

ul li a:hover{
    background:red;
    opacity:1;
}


/*.secondBlock li:hover{*/
/*opacity:1.0;*/
/*}*/

HTML:

<div class="secondBlock">
<ul>
    <li><a href="" class="secondLinks secondLink1"><img src="images/i1.png" class="imageList">Главная</a></li>
    <li><a href="" class="secondLinks secondLink2"><img src="images/i2.png" class="imageList">Служба</a></li>
    <li><a href="" class="secondLinks secondLink3"><img src="images/i3.png" class="imageList">Рендзина</a></li>
    <li><a href="" class="secondLinks secondLink4"><img src="images/i4.png" class="imageList">Солеперенос</a></li>
    <li><a href="" class="secondLinks secondLink5"><img src="images/i5.png" class="imageList">Медиапланировние</a></li>
    <li><a href="" class="secondLinks secondLink6"><img src="images/i6.png" class="imageList">Таргетирование</a></li>
    <li><a href="" class="secondLinks secondLink7"><img src="images/i7.png" class="imageList">Позиционирование</a></li>
    <li><a href="" class="secondLinks secondLink8"><img src="images/i8.png" class="imageList">Медиамикс</a></li>
    <li><a href="" class="secondLinks secondLink9"><img src="images/i9.png" class="imageList">Законодательство</a></li>
    <li><a href="" class="secondLinks secondLink10"><img src="images/i10.png" class="imageList">Жеода</a></li>
</ul>

更新: `

.secondBlock:hover a{
    opacity:0.5;
 }
 ul li a:hover{

      background:red;
      opacity:1;
 }

`

Answer 1

CSS opacity 属性是相对于父级的，然后 opacity:X; 对于子级等于 opacity:X*{parentOpacity}; 一个例子:

.parent {
  opacity:0.5;
}
.children {
  opacity:0.5; /* this is equals to 0.5*0.5 so 0.25 */
}

Demo解释一下。

文档 MDN :

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

.parent {
  opacity:0.5;
}
.children {
  width:200px;
  height:200px;
  background-color:red;
}
#children1 {
  opacity:0.5; /* 0.5 of the parent */
}

<div class="parent">
<div class="children" id="children1">

</div>
<div class="children" id="children2">

</div>
</div>

解决方案:

因为你想改变链接的不透明度，你可以使用 color:rgba(0,0,0,x); 代替。

然后:

.parent {
  color:rgba(0,0,0,0.5); /* opacity:0.5; */
}
.children {
  color:rgba(0,0,0,1); /* opacity:1; */
}

此外，当您将鼠标悬停在 a 上时，您还必须更改 img 的不透明度。

工作 DEMO .

.secondBlock {
  border-bottom: solid black 1px;
  height: 260px;
  text-decoration: none;
}
.secondBlock a {
  color:rgba(0,0,0,1);
}

.secondBlock:hover li a {
  color:rgba(0,0,0,0.5);
}

.secondBlock:hover li a img {
  opacity:0.5;
}

.secondBlock ul li a:hover {
  color:rgba(0,0,0,1);
}
.secondBlock ul li a:hover > img {
  opacity:1;
}

<div class="secondBlock">
  <ul>
    <li>
      <a href="" class="secondLinks secondLink6"><img src="http://www.placehold.it/32/32" class="imageList">Таргетирование</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink7"><img src="http://www.placehold.it/32/32" class="imageList">Позиционирование</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink8"><img src="http://www.placehold.it/32/32" class="imageList">Медиамикс</a>
    </li>
  </ul>