두 요소를 동시에 가져갈 수있는 방법은 무엇입니까?

Question

나는 동시에 theese 요소를 가져 오려고합니다. ..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 { 
    ... 
} 

그런 다음 사람들을 포함하도록 선택을 확장하여 마우스 오버시 개별 요소를 타겟팅 할 수 있습니다 :은`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; 
}