div의 링크 색상과 함께 아이콘 색상을 변경 하시겠습니까?

Question

아이콘과 텍스트 링크가있는 가로 목록이 있습니다.

나는 마우스를 움직일 때 아이콘 링크의 색상과 텍스트 링크의 색상도 변경하려고합니다. 지금까지, 저는 둘 중 하나만 바꾸기 만했습니다. 둘 다 같은 "a"에 있더라도. 마우스가 텍스트 링크 위로 이동하면 텍스트 링크가 색상을 변경하지만 아이콘 링크는 변경되지 않습니다.

내가 뭘 잘못하고 있니?

<ul class="glyphs character-mapping"> 
       <li> 
       <a href="" class="iconlink"> 
        <div data-icon="a" class="icon"></div>Link 1</a> 
       </li> 
       <li> 
       <a href="" class="iconlink"> 
        <div data-icon="b" class="icon"></div>Link 2</a> 
       </li> 
</ul> 

그리고 CSS :

.glyphs.character-mapping { 
margin: 0px; 
padding: 0px; 
color: rgba(0, 0, 0, 0.5); 
} 
.glyphs.character-mapping li { 
margin: 0px 10px 30px; 
display: inline-block; 
width: 165px; 
text-align: center; 
} 
.glyphs.character-mapping .icon { 
margin: 10px 0px 10px 45px; 
padding: 0px; 
position: relative; 
width: 70px; 
height: 70px; 
color: #162A36 !important; 
overflow: hidden; 
border-radius: 3px; 
font-size: 60px; 
} 
.glyphs.character-mapping .iconlink:hover{ 
color: #FF0000 !important; 
} 

Answer 1

이 시도 :

.glyphs.character-mapping .iconlink:hover, 
.glyphs.character-mapping .icon:hover { 
color: #FF0000 !important; 
} 

HTML은 <a> 요소는 인라인 요소를 포함 할 수 있음을 지정 여기

는 HTML입니다. A <div>은 블록 요소이므로 <a> 안에 표시되지 않을 수 있습니다.

은 왜 당신이 아이콘을 유혹 할 때 작동하는,

<ul class="glyphs character-mapping"> 
    <li> 
     <a href="" class="iconlink"> 
      <i data-icon="a" class="icon"/>Link 1 
     </a> 
    </li> 
    <li> 
     <a href="" class="iconlink"> 
      <i data-icon="b" class="icon"/>Link 2 
     </a> 
    </li> 
</ul>