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的文档：

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

.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>

Answer 2

元素的不透明度也取决于它的父元素。因此，使用 rgba() 选择颜色会很有帮助，这有助于选择颜色及其不透明度。试试下面的代码：

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

.secondBlock:hover li{
opacity:0.5;}


ul li a:hover{
background-color:rgba(255,0,0,1);}

Answer 3

给不透明度两个不同的值。第一个样式隐式应用于链接标记，因此第二个样式直接应用于相同的链接标记。尝试注释掉其中一种样式。