Question

不透明度：1;当我悬停在链接上似乎不起作用，虽然像背景：红色的命令似乎工作。任何人都可以解释为什么这样以及如何使不透明度工作？

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>

<强> SOLUTION：

由于您想要更改链接不透明度，因此您可以使用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; */
}

此外，当您悬停img时，您必须更改a不透明度。

工作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

赋予不透明度两个不同的值。第一个样式隐式应用于链接标记，因此第二个样式直接应用于相同的链接标记。尝试评论其中一种风格。

CSS不透明度在li里面不会起作用

3 个答案: