单击图像时无法实现悬停功能

Question

我遇到了一个悬停菜单，试图实现但无法获得所需的效果。在点击公司徽标时，将显示一个下拉列表。

我的代码：

.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索引，但仍然没有任何反应。它是完全隐藏的。我完全不知道如何进行此操作。谢谢

Answer 1

只需删除绝对位置；

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

Answer 2

只需更改代码中的top:0。

.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: 80px; /* img's height */
  left: 0;
  width: 100%;
  transition:337ms ease-in-out;
}

.client-container:hover .client-content {
  display: block;
}

/* i added border for reference */
.client-container:hover, .client-content{border: 1px solid}.client-container:hover{border-bottom-color:transparent}.client-content{border-top-color:transparent}

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

Answer 3

尝试一下：

.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="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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>
  <div class="row">
    <div class="col-lg-3 text-center client-container">
      <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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 client-container">
      <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="80%" height="auto">
      <div class="client-content p-4">
        <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" width="100%" height="auto">
        <p style="padding-top: 10px;">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>
  <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>