我遇到了一个悬停菜单,试图实现,但无法得到想要的效果。单击公司徽标时,应出现一个下拉列表。
我的代码:
.client-container{
position: relative;
display: inline-block;
}
.client-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
transition:337ms ease-in-out;
}
.client-container:hover .client-content {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
有谁能帮我这个问题。在我的情况下,悬停菜单来了,但它隐藏的标志。我尝试了与z索引,但仍然没有发生。它是完全隐藏的。我完全不知道该怎么做。谢谢
最佳答案
只需去掉绝对位置;
.client-container{
position: relative;
display: inline-block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top:0;
background-color: #fff;
transition:337ms ease-in-out;
min-height: 80px;
}
.client-content {
display: none;
min-width: 160px;
}
.client-container:hover .client-content {
display: block;
}
.client-container:hover {
position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2 class="text-center">Our Clients</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center client-container">
<img src="http://pngimg.com/uploads/sony_logo/sony_logo_PNG2.png" width="100" height="80">
<div class="client-content p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis dui vitae placerat vehicula. Aliquam ante lectus, suscipit non eros eu, mattis tempus turpis. Curabitur iaculis hendrerit dolor quis ultricies. Donec dignissim rutrum lectus
et dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi.</p>
<a class="btn btn-custom">Read More</a>
</div>
</div>
<div class="col-lg-3 text-center">
<img src="images/tracfone-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/health.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo3_color.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/Homepage_slice_4_logo2_color.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_DKSH-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_david-jones-1.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/canon.png">
</div>
</div>
<div class="row">
<div class="col-lg-3 text-center">
<img src="images/roche.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/coles.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/Cnetric_Client_Logo_helicord.png">
</div>
<div class="col-lg-3 text-center">
<img src="images/telstra.png">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center text-center">
<button class="btn btn-warning">All Clients</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>