CODEWITHSUNDEEP
htmlcsscss-selectors
MrAnonymusz
MrAnonymusz

Reputation: 33

How I can hover two elements at the same time?

I wanna make to hover theese elements at the same time: ..span class="glyphicon glyphicon-link icon-top.. and ..a href="javascript:;" class="link1" This is a text..

Please help me with that.

// Dont run this snippet :) I used it to paste me code  \\
.top-part > .top-left-part > ul {
    list-style: none;
}

.top-part > .top-left-part > ul > li {
    display: inline-block;
}

.top-part > .top-left-part > ul > li > .link1 {
    color: white;
    transition: all 0.3s ease;
}

.top-part > .top-left-part > ul > li > .link1 {
    color: white;
    text-decoration: none;
}

.top-part > .top-left-part > ul > li > .link1:hover {
    color: #2ECC71;
    text-decoration: none;
}

.top-part > .top-left-part > ul > li > .icon-top {
    color: white;
    background-color: #555;
    border-radius: 200px;
    padding: 7px;
    margin: 0 2.5px;
    transition: all 0.3s ease;
}

.top-part > .top-left-part > ul > li > .icon-top:hover {
    background-color: #2ECC71;
}
<ul>
                            <li><span class="glyphicon glyphicon-link icon-top"></span>    
                            <a href="javascript:;" class="link1">
                                [email protected]
                            </a></li>
                            <li><span class="glyphicon glyphicon-envelope icon-top"></span>
                            <a href="javascript:;" class="link1">
                                Kapcsolat
                            </a></li>
                        </ul>

Upvotes: 2

Views: 1758

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

In this case those are the only elements contained within a li element. Because of this, you can simply apply the hover styling to the li:

.top-part > .top-left-part > ul > li:hover {
  ...
}

You can then target the individual elements during the hover by extending your selector to include those:

.top-part > .top-left-part > ul > li:hover > .link1 {
    color: #2ECC71;
    text-decoration: none;
}

.top-part > .top-left-part > ul > li:hover > .icon-top {
    background-color: #2ECC71;
}

Upvotes: 4

Related Questions