Question

你好我有这样的代码

<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的颜色，同时我还在徘徊.dropdown:hover .dropdown-content。在这个问题中，我希望保留.button2:hover { }，同时我仍然悬停.dropdown:hover .dropdown-content

Answer 1

使用jquery

<强> Jquery的

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

Answer 2

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

<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吗？

2 个答案: