Как я могу совместить два элемента одновременно?

Question

Я хочу сделать, чтобы навести эти элементы одновременно: ..span class = "glyphicon glyphicon-link icon-top .. и ..a href =" javascript :; "class =" link1 "Это текст. .

Пожалуйста, помогите мне с этим.

// 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"> 
 
           info@mccore.ml 
 
          </a></li> 
 
          <li><span class="glyphicon glyphicon-envelope icon-top"></span> 
 
          <a href="javascript:;" class="link1"> 
 
           Kapcsolat 
 
          </a></li> 
 
         </ul>

Answer 1

в этом случае те являются единственными элементами, содержащиеся внутри li элемента. из-за этого, вы можете просто применить парения стиль для li:

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

Вы можете настроить таргетинг на отдельные элементы во время висения, расширяя свой селектор, чтобы включить эти:

.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; 
}