2

I display some events with current date and how many days left. The first span of days-left has opacity 0. I want when I hover on the second span (tour-date) then change opacity 1 for the first span (days-left).

I can solve this with eventlistener or jQuery but before I do it I want to know if there option with 2-3 lines in the 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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
d_m2653
  • 31
  • 2

2 Answers2

1

You can use the CSS :hover pseudo-class to change the opacity of the element when the user hovers over it. You can also use the transition property to animate the change in opacity. Here is an example:


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

.days-left:hover {
  opacity: 1;
}
Nuro007
  • 157
  • 12
  • try reading again, I want when the user hover on the second span then change opacity on the first span – d_m2653 Nov 18 '22 at 14:39
0

First is more good practice to use classes in CSS. Second It would be more easy if you use SCSS in this task. Based on the question you have to change the opacity to 0 in the .days-left class and then say .tour-row .towr-date:hover .days-left { opacity: 1 }

isherwood
  • 58,414
  • 16
  • 114
  • 157
Aldo Nezha
  • 11
  • 1