css - 當我觸發懸停時，我可以插入另一個類/ ID嗎？

你好，我有這樣的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

來源

2017-08-30 Wowie

使用jQuery保留

jQuery的

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

來源

2017-08-30 01:55:39

我的榜樣，我會嘗試此之後不復還。謝謝 – 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/

來源

2017-08-30 03:04:56 besseddrest

css - 當我觸發懸停時，我可以插入另一個類/ ID嗎？

回答

相關問題