css - 当我触发悬停时，我可以插入另一个类/ ID吗？

问题描述：

<button type="button" class="button2">PROVIDER PORTAL</button> 
    <div class="dropdown-content"> 
    <a class="btn btn-info button2s" href="applicationprovider.aspx">APPLY AS PROVIDER</a> 
    <a class="btn btn-info button2s" href="loginProvider.aspx">LOGIN TO ACCOUNT</a> 
</div>

代码是什么在我的CSS发生的事情是，当我将鼠标悬停在button2这个CSS是触发

.button2:hover { 
    background-color: #286090; 
    color: #f5f9fc; 
    border-color: #f5f9fc; 
}

那么这 <div class='dropdown-content'将触发，开辟一个新的选择<a>就是这样的

.dropdown:hover .dropdown-content { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: opacity 600ms, visibility 600ms; 
    transition: opacity 600ms, visibility 600ms; 
}

我想保留.button2的颜色，而im仍然在.dropdown:hover .dropdown-content上徘徊。在这个问题上，我想.button2:hover { }，而我仍然徘徊在.dropdown:hover .dropdown-content

答

使用jQuery保留

jQuery的

$("#button1").hover(function() { 
    $(this).addClass("but1"); 
}, function() { 
    $(this).removeClass("but1"); 
}); 
$("#button2").hover(function() { 
    $(this).addClass("but2"); 
}, function() { 
    $(this).removeClass("but2"); 
});

我的榜样，我会尝试此之后不复还。谢谢 – Wowie

答

你可以嵌套的元素，这应该让你实现你想要的样式，而不必使用JS/jQuery来添加删除类。

<div class="container"> 
    <span class="title">Provider Portal</span> 
    <div class="dropdown"> 
    Dropdown content 
    </div> 
</div>

然后

<style> 
.title { // title can be styled like a button 
    font-size: 18px; 
    background: #286090; 
    color: white; } 
.dropdown { // hide dropdown content 
    display: none; } 
.container:hover .title, .title:hover { // retain hover color 
    background: lightblue; } 
.container:hover .dropdown { // show dropdown content 
    display: block; } 
</style>

看到这里https://jsfiddle.net/dxg1v7rv/

css - 当我触发悬停时，我可以插入另一个类/ ID吗？

相关推荐