如何改变前面兄弟元素的不透明度?

Question

我显示了一些带有当前日期和剩余天数的事件。第一个时间跨度的不透明度为0。我想当我悬停在第二个span (tour-date)上时，然后为第一个span (days-left)改变不透明度1。

我可以用eventlistener或jQuery来解决这个问题，但在我这样做之前，我想知道是否有2-3行CSS选项。

.days-left {
position: absolute;
left: 21%;
background-color: black;
height: 3%;
color: white;
border-radius: 10%;
font-weight: bold;
opacity: 1;
}
.tour-row :nth-child(2):hover> :nth-child(1) {
opacity: 0;
}

<div className="tour-row">
<span className='days-left'>{`daysLeft : ${currentTourInArray.daysLeft}`}</span>
<span className="tour-item tour-date ">{currentTourInArray.date}</span>
<span className="tour-item tour-city">{currentTourInArray.city}</span>
<span className="tour-item tour-arena">{currentTourInArray.arena}</span>
</div>

Answer 1

当用户将鼠标悬停在元素上时，可以使用CSS:hover伪类来改变元素的不透明度。你也可以使用transition属性来改变不透明度。下面是一个例子:

.days-left {
opacity: 0;
transition: opacity 0.5s;
}
.days-left:hover {
opacity: 1;
}

Answer 2

首先是在CSS中使用类。第二，如果你在这个任务中使用SCSS会更容易。根据这个问题，你必须在。days-left类中将不透明度改为0，然后输入.tour-row .towr-date:hover .days-left { opacity: 1 }