Question

我希望在以下情况下通过css定位两个div的属性：将鼠标悬停在一个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

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

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


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

OR

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


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

在一次悬停时定位2个div

1 个答案: