如何让货币选择器下拉菜单展开时保持悬停粉色样式

我来帮你搞定这个小问题！你遇到的情况是因为当前的CSS只在鼠标直接悬停在主货币链接上时才会触发粉色样式，当鼠标移到下拉菜单里，主链接的hover状态就消失了，所以变回灰色。咱们可以通过把hover状态绑定到父容器上来解决这个问题。

修改步骤： #

只需要调整CSS里的hover选择器，把原来针对 .current-currency span:hover 的样式，改成针对父容器 .currency:hover 下的主链接：

/* 替换原来的这一行 */
/* .current-currency span:hover, .current-currency span:hover:after { color: #C91D64 !important; } */

/* 改成下面的样式 */
.currency:hover .current-currency span, .currency:hover .current-currency span:after {
    color: #C91D64 !important;
}

原理说明： #

原来的选择器只在鼠标悬停在current-currency span元素本身时生效，当鼠标移到下拉菜单（属于.currency的子元素）上，span的hover状态就结束了。而把hover绑定到父容器.currency上后，只要鼠标在整个货币选择器的范围内（包括主链接和下拉菜单），主链接和箭头都会保持粉色。

另外，如果你希望下拉菜单在hover主链接时自动展开（而不是只靠点击），可以再添加一段CSS：

.currency:hover ul {
    display: block !important;
}

修改后的完整CSS（货币选择器部分）： #

/*--- Drop-Down Currency Selector ---*/
.currency table { display: none; }
#top-bar .currency { float: right; position: relative; /* 加这个让下拉菜单的absolute定位基于父容器 */ }
#top-bar .currency a { display: inline-block; font-family: 'Rajdhani'; font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: .025em; }

.current-currency span { text-align: right; margin: 1px 0 0 20px; padding-bottom: 4px; cursor: pointer; transition: .3s; }
.current-currency span:after { font-family: fontawesome; content: "\f107"; color: #666; margin: 0 0 0 5px; font-size: 15px; transition: .3s; }

/* 修改后的hover样式 */
.currency:hover .current-currency span, .currency:hover .current-currency span:after {
    color: #C91D64 !important;
}

.currency ul { background: #666; position: absolute; top: 30px; right: 28px; width: 60px; margin: 0; padding: 0; z-index: 40; display: none; }
.currency li { margin: 0; padding: 0; list-style: none; }
#top-bar .currency li a { display: block; padding: 5px; transition: .3s }
#top-bar .currency li a:hover { background: #555; }

/* 可选：hover主链接时自动展开下拉菜单 */
/* .currency:hover ul { display: block !important; } */

这样调整后，不管鼠标是在主链接上还是下拉菜单里，主链接都会保持粉色啦！

内容的提问来源于stack exchange，提问作者Mikey