【发布时间】：2021-06-30 15:10:09
【问题描述】：
我在 bootstrap 3 中实现了多个按钮。这个想法是，如果鼠标悬停在特定按钮上，则会打开一系列按钮。在下面的代码中，当“水”按钮悬停在它上面时，它会显示按钮“1,2,4”，但是当我悬停或单击“a”时，它们不会消失。我希望当“a，bb2，c，d，ee2”中的任何其他按钮悬停时，只显示其子按钮，并且任何其他先前显示的按钮都从屏幕上隐藏。如何才能做到这一点？ https://jsfiddle.net/tnj6zLos/1/
$( document ).ready(function() {
$('#create_btn').on('click', function(){
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function(){
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function(){
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e){
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e){
e.preventDefault();
$("#tab1default").css("opacity","1");
})
$(".hover_btn2").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn2").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
}); #customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
@media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default{
margin-right: 4px;
}
.flex .panel-default>.panel-heading{
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child{
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,.btn.focus, .btn:focus {
color: #fff;
}
.btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
color: #fff;
background: blue;
}
.nav-tabs{
border: none;
}
.hover_btn{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div><br></br>Some text.</div>
<div class="container" id="customTab">
</div>
<div class="panel-heading">
<ul class="nav nav-tabs" style="display: flex; justify-content: space-around; border: none;">
<li><span class="btn btn-info btn-lg ">main heading</span></a>
</li>
</ul>
</div>
</div>
</div>
<br></br>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><a href="#tab1default" data-toggle="tab" id="test"><span class="hover_btn" >Water</span></a>
</li>
<li><a href="#tab2default" data-toggle="tab"><span
class="btn btn-info">aaaa</span></a></li>
<li><a href="#tab3default" data-toggle="tab"><span
class="btn btn-info">b<br>b2</br>
</span></a>
</li>
<li><a href="#tab4default" data-toggle="tab"><span class="btn btn-info">c</span></a>
</li>
<li><a href="#tab5default" data-toggle="tab"><span class="btn btn-info">d</span></a>
</li>
<li><a href="#tab6default" data-toggle="tab"><span class="btn btn-info">e<br>e2</br>
</span></a></li>
</ul>
</div>
</div>
<div class="tab-content hover_btn2">
<div class= "hover_btn2" >
<div class="tab-pane fade" id="tab1default" >
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span
class="btn btn-info">1</span></li>
</ul>
<div class=" panel-default">
<ul class="nav nav-tabs">
<li a id="login_btn"><span class="btn btn-info" data-target="#signin" data-toggle="modal">2</span></a>
</li>
</ul>
<div class="modal fade" id="signin" role="dialog">
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a id="login_tab" href="#login" data-toggle="tab">3</a></li>
<li class=""><a id="create_tab" href="#create" data-toggle="tab">Reviews</a></li>
<li class=""><a id="create1_tab" href="#create1" data-toggle="tab">Workflows</a></li>
</ul>
<div id="myTabContent" class="tab-content ">
<div class="tab-pane active in" id="login">
<iframe src= "" style="border:none;width:1450px;height:600px;" >
</iframe>
</div>
<div class="tab-pane fade.in" id="create">
<p>
hello
</p>
</div>
<div class="tab-pane fade.in" id="create1">
<p>
hellosss
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
<div >
<ul class="nav nav-tabs">
<li href="#tab2default3" data-toggle="tab"><span
class="btn btn-info">4</span></li>
</ul>
<br></br>
<div class="flex tab-pane fade" id="tab2default3">
<ul class="nav nav-tabs">
<li href="#tab22default3" data-toggle="tab"><span
class="btn btn-info">4</span>
</li>
</ul>
<ul class="nav nav-tabs">
<li href="#tab222default3" data-toggle="tab"><span
class="btn btn-info">5</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default1" data-toggle="tab"><span
class="btn btn-info">6</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal7">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal8">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default2" data-toggle="tab"><span
class="btn btn-info">7</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal9">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal10">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab3default3" data-toggle="tab"><span
class="btn btn-info">8</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab3default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal11">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal12">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default2" data-toggle="tab"><span
class="btn btn-info">9</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal21">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal22">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab5default3" data-toggle="tab"><span
class="btn btn-info">10</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab5default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal23">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal24">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default1" data-toggle="tab"><span
class="btn btn-info">11</span></a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default1">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal25">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal26">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default2" data-toggle="tab"><span
class="btn btn-info">12</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default2">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal27">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal28">Reviews</button>
</div>
</div>
</div>
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><a href="#tab6default3" data-toggle="tab"><span
class="btn btn-info">13</span></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-pane fade" id="tab6default3">
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal29">Workflow</button>
<button class="btn btn-info" data-toggle="modal"
data-target="#myModal30">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>【问题讨论】：
标签： javascript html jquery css