CSS изменяет отдельные элементы при наведении, пока все они наведены - PullRequest
Новая
       35

CSS изменяет отдельные элементы при наведении, пока все они наведены

0 голосов
/ 12 октября 2018

Я искал решение по stackoverflow, но ничего не нашел.У меня есть набор иконок.По умолчанию они серые и видны только 4 из 7.Когда я нахожу на div с иконками, я хочу, чтобы 7 из 7 были видимыми и серыми.И при наведении на них, я хочу, чтобы каждая отдельная иконка, которая находится на ней, менялась на одну и ту же иконку разного цвета (у меня есть 2 разных SVG для каждой пиктограммы - серой и синей) 

.card-list .social span img {
  height: 13px;
  margin-top: -2px;
}

.card-list .social:hover>.hidden {
  display: inline;
}

.card-list .social:hover>.visible {
  display: none;
}

.card-list .social .hidden span:hover {}
<div class="align-self-center social col-8 col-md-2 px-0">
  <div class="visible mx-0 px-0">
    <span class="visible"><img src="images/email-normal.svg"></span>
    <span class="visible"><img src="images/telegram_normal.svg"></span>
    <span class="visible"><img src="images/twitter_normal.svg"></span>
    <span class="visible"><img src="images/facebook-normal.svg"></span>
  </div>
  <div class="hidden mx-0 px-0">
    <span class=""><img src="images/more_normal.svg"></span>
    <span class=""><img src="images/email-normal.svg"></span>
    <span class=" "><img src="images/telegram_normal.svg"></span>
    <span class=""><img src="images/phone-normal.svg"></span>
    <span class=""><img src="images/twitter_normal.svg"></span>
    <span class=""><img src="images/facebook-normal.svg"></span>
    <span class=""><img src="images/bitcoin_normal.svg"></span>
  </div>
</div>

Так что, если я что-то напишу в последнем селекторе, он зависнет в html при наведении курсора, так как я полагаю, что один при наведении курсора накладывается на другой, и он сходит с ума) Будет счастливза любые предложения (JS и JQuery тоже), потому что я немного озадачен)

1 Ответ

0 голосов
/ 12 октября 2018

Вы не должны использовать отдельные элементы DIV для этого.Вместо этого вы можете просто использовать один элемент div и показывать / скрывать значки при наведении курсора.У меня нет ваших изображений здесь, поэтому я просто использую значки материалов Google, чтобы показать вам пример: 

.hidden {
  display: none;
}

.icons:hover .hidden{
  display: inline;
}

span:hover {
  color: red;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class='icons'>
  <span><i class="material-icons">accessibility</i></span><br/>
  <span><i class="material-icons">face</i></span><br/>
  <span class='hidden'><i class="material-icons">android</i></span><br/>
  <span class='hidden'><i class="material-icons">autorenew</i></span>
</div>

Элементы span с классом hidden будут показаны при наведении div.При наведении курсора на значок его цвет меняется на красный.Та же идея применима к вашим изображениям.Вместо использования элементов <img/> используйте элементы <div/> и используйте CSS, чтобы установить изображение в качестве фона этого элемента.Это позволит вам использовать CSS для установки другого фонового изображения при наведении курсора.

...