CSS 鼠标悬停时不透明度在 li 内不起作用

Question

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

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 不透明度属性是相对于 parents 然后 opacity:X; 对于 children 等于 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>

解决方案：

因为你想改变 link 不透明度，你可以使用 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() 选择颜色会有所帮助，这有助于 select 颜色及其不透明度。试试下面的代码：

.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

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

CSS 鼠标悬停时不透明度在 li 内不起作用

CSS opacity wont work inside li on hover

html

css

opacity