html - 如何在选定子项不透明后更改父项？

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) 的不透明度值，以便最终用户看到什么他/她在页面加载时选择。

这是我处理悬停状态的代码。

fiddle :https://jsfiddle.net/giwrgos/0vLmkhr2/1/

Answer 1

你需要从最后一条规则中移除:after，因为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;
}

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

查看您编辑的 fiddle :

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