호버 색상 변경시 CSS는 i 태그에 영향을주지 않습니다.

질문

저는 span과 i라는 2 개의 태그를 포함하는 div를 만들었습니다.색상과 커서를 변경하는 div에 마우스 오버를 추가하려고 시도했지만 i 태그에서는 색상이 변경되지 않습니다.

.example {
    margin: 20px;
    position: fixed;
    display: inline;
}
.example i {
    border: solid #8690ab;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    line-height: 10px;
    position: relative;
    top: -15px;
}
.example span {
    display: inline-block;
    padding: 0px;
    color: #8690ab;
    margin: 5px 15px;
    vertical-align: middle;
    position: relative;
    top: -15px;
}

.example:hover, .example:hover i, .example:hover span{   
    cursor: pointer;
    color: #a9afc0;
}

<div class="example">
  <span>text</span>
  <i className="arrowdown"></i>
</div>

Expand snippet

i 태그의 색상도 변경하는 방법은 무엇입니까?더 좋은 메소드가 있습니까?

답변1

색상 태그는 태그의 텍스트 색상 만 변경합니다. 텍스트가 없기 때문에 아무 일도 일어나지 않습니다. 필요한 경우 테두리 색상을 변경해 볼 수 있습니다.

.example:hover, .example:hover i, .example:hover span{   
    cursor: pointer;
    border-color: #a9afc0;
    color: #a9afc0;
}

답변2

.example {
      margin: 20px;
    position: fixed;
    display: inline;
}
.example i {
    border: solid #8690ab;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    line-height: 10px;
    position: relative;
    top: -15px;
}
.example span {
    display: inline-block;
    padding: 0px;
    color: #8690ab;
    margin: 5px 15px;
    vertical-align: middle;
    position: relative;
    top: -15px;
}

.example:hover, .example:hover i, .example:hover span{   
    cursor: pointer;
    color: #4287f5;
    cursor: pointer;
    border-color: #4287f5;
}

<div class="example">
  <span>text</span>
  <i className="arrowdown"></i>
</div>

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/63113689/css-on-hover-color-change-dose-not-effect-i-tag