Arkadis Stepanov Arkadis Stepanov - 28 days ago 7
HTML Question

CSS opacity wont work inside li on hover

opacity:1; seems not to work when i hover on the link,although commands like background:red seems to work.Can anyone explain why is that and how to make opacity work?

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>




UPDATE:
`

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

background:red;
opacity:1;
}


`

Answer

The CSS opacity property is relative to the parents then opacity:X; for the children is equals to opacity:X*{parentOpacity}; an example:

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

Demo to explain it.

Documentation by 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>

SOLUTION:

Since you want to change the link opacity you can use color:rgba(0,0,0,x); instead.

Then:

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

Also you have to change the img opacity when you hover the a.

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