Наведите указатель мыши на элемент div и измените непрозрачность. - PullRequest
Новая
       12

Наведите указатель мыши на элемент div и измените непрозрачность.

0 голосов
/ 25 февраля 2019

Хотите выделить один из них, сделав два прозрачных.Но они используют один и тот же класс, не знаете, возможно ли это? 

.regcard{
  transition: opacity 0.5s;
}

.regcard:hover ~ .standout{ 
  opacity: 0.5;
  background:green; } 
<div class="item">
      <a href="#" target="_blank" class="standout">
    <div class="regcard cardlist" >
      number 1
        </div>
      </a>
  </div>
  
     <div class="item">
      <a href="#" target="_blank" class="standout">
    <div class="regcard cardlist" >
      number 2
        </div>
      </a>
  </div>
  
     <div class="item">
      <a href="#" target="_blank" class="standout">
    <div class="regcard cardlist" >
      number 3
        </div>
      </a>

1 Ответ

0 голосов
/ 25 февраля 2019

Пока ваши предметы имеют общего предка: 

.regcard {
  transition: opacity 0.5s;
}

/* Fade all items when parent is hovered */
.items:hover .regcard {
  opacity: 0.5;
}

/* Un-fade the hovered item */
.items .regcard:hover {
  opacity: 1;
}
<div class="items">
  <div class="item">
    <a href="#" target="_blank" class="standout">
      <div class="regcard cardlist">
        number 1
      </div>
    </a>
  </div>

  <div class="item">
    <a href="#" target="_blank" class="standout">
      <div class="regcard cardlist">
        number 2
      </div>
    </a>
  </div>

  <div class="item">
    <a href="#" target="_blank" class="standout">
      <div class="regcard cardlist">
        number 3
      </div>
    </a>
  </div>
</div>
...