Html 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>

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

那么这个

使用jquery

Jquery

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

可以嵌套元素，这样就可以实现所需的样式，而无需使用JS/jQuery添加和删除类

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


提供者门户
下拉内容

然后


.title{//title的样式可以像按钮一样
字号：18px；
背景：#286090；
颜色：白色；}
.dropdown{//隐藏下拉列表内容
显示：无；}
.container:hover.title，.title:hover{//retain hover color
背景：浅蓝色；}
.container:hover.dropdown{//显示下拉列表内容
显示：block；}

请参见我的示例
我将稍后再试。谢谢
<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>