Question

我在我的网站的右上角添加了一个下拉货币选择器，当我将鼠标悬停在链接上时，它会从灰色变为粉红色，然后菜单会下降。但是，只要将鼠标悬停在任何菜单链接上，它就会再次变为灰色。

理想情况下，我希望它保持粉红色，同时下拉菜单悬停在选择器上，但却无法让它工作。

我的网站链接是：http://bp150.betapark.co.uk/

这是我的HTML / JavaScript：

<div id="top-bar"><span>Call Us: <b>07725 360648 </b>Mon - Sat: 9:00AM - 5:00PM</span>
    <!-- Currency Selector -->
    <div class="currency">{%block_17}
        <div class="current-currency"><span></span></div>
        <ul>
            <li><a href="?currency=1" rel="nofollow">&pound; GBP</a></li>
            <li><a href="?currency=2" rel="nofollow">&euro; EUR</a></li>
            <li><a href="?currency=5" rel="nofollow">&dollar; USD</a></li>
        </ul>
    </div>
    <!-- End -->
    <div class="social"><a href="/" target="_blank"><i class="fab fa-pinterest"></i></a> <a href="/" target="_blank"><i class="fab fa-instagram"></i></a> <a href="/" target="_blank"><i class="fab fa-twitter"></i></a> <a href="/" target="_blank"><i class="fab fa-facebook-f"></i></a></div>
</div>

<script>
    var current = $(".currency select option:selected").val();

    if (current == 1) {
        $(".current-currency span").html('&pound; GBP');
    }
    if (current == 2) {
        $(".current-currency span").html('&euro; EUR');
    }
    if (current == 5) {
        $(".current-currency span").html('&dollar; USD');
    }

    $(".current-currency").click(function() {
        $(".currency ul").slideToggle("fast");
    });
</script>

这是CSS：

/*--- Drop-Down Currency Selector ---*/

.currency table {
display: none;
}

#top-bar .currency {
float: right;
}

#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;
}

.current-currency span:hover,
.current-currency span:hover: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;
}

任何想法的人，并提前感谢!!

Answer 1

您需要将:hover应用于父容器class="currency"

.currency:hover .current-currency span,
.currency:hover .current-currency span:after {
color: #C91D64 !important;
}

然后将鼠标悬停在该区块内的所有区域将保留颜色

选择菜单项时保持悬停颜色更改

1 个答案: