Question

你好我正在寻找一种方法，使用css来改变父不透明度值，如果它包含一个选定的子类，则在之后。到目前为止我所取得的成就只是悬停状态。在悬停时我会在:: after上为父级添加背景颜色。这是我的代码

HTML

<ul class="slider-thumbs">
  <li class="reason-item"><a>Item 1</a></li>
  <li class="reason-item"><a class="selected">Item 2</a></li>
  <li class="reason-item"><a>Item 3</a></li>
  <li class="reason-item"><a>Item 4</a></li>
  <li class="reason-item"><a>Item 5</a></li>
</ul>

CSS

.slider-thumbs .reason-item{position: relative;vertical-align: top;}
.slider-thumbs .reason-item::after {content: '\A';position: absolute;width: 100%; height:100%;top:0; left:0;background:rgba(252,194,38,0.9);opacity: 0;transition: all 1s;-webkit-transition: all 1s;}
.slider-thumbs .reason-item:hover::after, .slider-thumbs .reason-item:after + a.selected{opacity: 1;}

因此，当用户选择其中一个可用项目时，我想更改包含所选类别的父级（::after）的不透明度值，以便最终用户查看他/她选择的内容时页面加载。

这是我使用悬停状态的代码。

小提琴：https://jsfiddle.net/giwrgos/0vLmkhr2/1/

Answer 1

您需要从最后一条规则中删除<ul> <li> // nav item <a href="#">link</a> <ul> // dropdown content <li></li> ... </ul> </li> ... </ul>，因为在:after伪元素不存在::after之后。

所以你的最终代码将是：

a.selected

.slider-thumbs .reason-item{
  position: relative;
  vertical-align: top;
}
.slider-thumbs .reason-item::after {
  content: '\A';
  position: absolute;
  width: 100%; 
  height:100%;
  top:0; 
  left:0;
  background:rgba(252,194,38,0.9);
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}
.slider-thumbs .reason-item:hover::after, 
.slider-thumbs .reason-item + a.selected{
  opacity: 1;
}

查看您编辑过的小提琴：

https://jsfiddle.net/0vLmkhr2/3/

Answer 2

您将无法仅通过遍历DOM来使用css，因为它不是以这种方式构建的。如果你有类selected，你可以使用jQuery： -

$(".selected").find().parent("li").css("color", "red");

Answer 3

我已经改变了要应用于a而不是li的样式，所以现在它正在工作。这是代码

Printer

如何在所选孩子的不透明度后更改父母？

3 个答案: