html - 一次悬停定位 2 个 div

Question

当鼠标悬停在一个 div 上时，我想通过 css 定位两个 div 的属性。

#down-icn {  
 position: absolute;
 bottom: 0; right: 25px;
 color: #fff;
 -webkit-transition: color 0.25s ease; border-color 0.5s ease;
 -moz-transition: color 0.25s ease; border-color 0.5s ease;
 -ms-transition: color 0.25s ease; border-color 0.5s ease;
 -o-transition: color 0.25s ease; border-color 0.5s ease;
 transition: color 0.25s ease; border-color 0.5s ease;
}

#down-icn:hover { 
 color: #ef5c30; 
 border-color: #ef5c30;
}

.icn {
 border: 2px solid #fff;
 border-radius: 50%;
 padding: 10px;
 margin-left: 10px;
}

!!! .icn:hover {
 border: 2px solid #000;
 color: #000;
}

当悬停在#down-icn 上时，我想更改#down-icn 和.icn 的属性。

编辑 - html

   <a href="#footer-anchor">
        <div id="down-icn" data-0="opacity: 1; bottom: 25px;" data-550="opacity: 0; bottom: 100px;">more<i class="icn fa fa-chevron-down fa-2x"></i></div>
    </a>

Answer 1

为什么不直接使用 anchor 进行悬停选择？

a:hover > #down-icn{ 
 color: #ef5c30; 
 border-color: #ef5c30;
}


a:hover > .icn {
 border: 2px solid #000;
 color: #000;
}

或

 #down-icn:hover{ 
     color: #ef5c30; 
     border-color: #ef5c30;
 }


 #down-icn:hover > .icn {
     border: 2px solid #000;
     color: #000;
 }