在选择菜单项时保持悬停颜色更改
在选择菜单项时保持悬停颜色更改
提问于 2018-05-31 06:30:12
我已经在我的网站右上角添加了一个下拉货币选择器，当你将鼠标悬停在链接上时，它会从灰色变成粉色，然后会有一个菜单下拉。但是，只要您将鼠标悬停在任何菜单链接上，它就会再次变为灰色。
理想情况下，我希望它保持粉红色，而下拉菜单悬停在上面，并与选择器一起玩，但就是不能让它工作。
我的网站链接是：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">£ GBP</a></li>
<li><a href="?currency=2" rel="nofollow">€ EUR</a></li>
<li><a href="?currency=5" rel="nofollow">$ 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('£ GBP');
}
if (current == 2) {
$(".current-currency span").html('€ EUR');
}
if (current == 5) {
$(".current-currency span").html('$ 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;
}任何想法，伙计们，提前感谢！！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 06:54:10
您需要对父容器class="currency"应用:hover
.currency:hover .current-currency span,
.currency:hover .current-currency span:after {
color: #C91D64 !important;
}然后将鼠标悬停在该块内的所有区域上将保留该颜色
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50614180
复制相关文章
相似问题