代码之家 › 专栏 › 技术社区 › Arkadis Stepanov

CSS不透明度在li中不起作用

opacity css html

Arkadis Stepanov · 技术社区 · 8 年前

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;
 }

3 回复 | 直到 8 年前

paolobasso 8 年前

CSS不透明度属性是相对于父对象的,然后 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; */
}

此外,您必须更改 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>

Irshad Shaik 8 年前

.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);}

M. Abdulai 8 年前

给出了两个不同的不透明度值。第一样式隐式地应用于链接标签,使得第二样式直接应用于相同的链接标签。尝试注释其中一种样式。