CSS changing separate elements on hover while all of them are hovered

Anna

New Member
#1
I was looking for the solution over stackoverflow, but didn't find anything. I have a set of icons. By default they're grey and only 4 out of 7 are visible. When I hover on div with icons I want 7 of 7 to be visible and grey. And while hovering them, I want every separate icon, that is hovered, to be changed with the same icon of different color ( I have 2 different SVGs for every icon - grey and blue one)
Mã:
.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 {}
Mã:
<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>
So if I write something in the last selector it screws up in html on hover, as I guess one hover overlays other and it goes wild) Will be happy for any suggestions (JS and JQuery too), because I am a little bit puzzled)
 

Admin

Administrator
Thành viên BQT
#2
You shouldn't use seperate DIV elements for this. Instead, you can simply use a single div element and show / hide the icons on hover. I don't have your images here, so I'll just use Google's Material Icons to show you an example:
Mã:
.hidden {
  display: none;
}

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

span:hover {
  color: red;
}
Mã:
<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>
The span elements with class hidden will be shown when the div is hovered. When you hover an icon, its color will be changed to red. The same idea would apply to your images. Instead of using <img/> elements, use <div/> elements and use CSS to set the image as the background of that div. That will allow you to use CSS to set the background image to another one on hover.
 
OP
OP
A

Anna

New Member
#3
Oh, thanks a lot. Marked your answer as the right one.Thanks a lot for detailed explanation!
 
Top