Question

我是一名博主，我正在努力学习日常使用的某些东西。今天我正试着拍一张照片，当你将鼠标悬停在它上面时，它会在文本上方淡入淡出，我希望该文字有一个下拉菜单。

前：我有一张书的照片。当悬停在图片中间出现的图书时，照片有一个透明的叠加层。当您将鼠标悬停在图书上时，下拉菜单会显示Hauls，Reviews和Inspired By。我还希望能够点击“书籍”一词，并将它带到所有贴有标签的书籍上。

这是我到目前为止的代码：

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #000000;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<div class="container">

  <img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" alt="Avatar" class="image" style="width:100%">

  <div class="middle">
    <div class="text"><a href="http://www.mynerdydelights.com/search/label/books">Books</a></div>

  </div>

</div>

<div class="dropdown">

  <button class="dropbtn">Dropdown</button>

  <div class="dropdown-content">

    <a href="#">Hauls</a>

    <a href="#">Reviews</a>

    <a href="#">Inspired By</a>
  </div>

</div>

我希望这是有道理的！非常感谢你的帮助！

Answer 1

首先，移动for i in data: new_tasks.put(i) for _ in range(num_of_threads): new_tasks.put(None)内部dropdown-content内容，因为如果CSS悬停不是父元素，则无法访问它，您可以像这样更改HTML标记。

＆＃13;

middle

＆＃13;

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  -webkit-transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #000000;
  display: inline-block;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}


/* this for show dropdown */

.middle .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
}

.middle:hover .dropdown-content {
  display: block
}

＆＃13;

我认为它的工作方式与你想要的一样..下拉内容总是会显示中间是否徘徊。

使用可下拉的下拉菜单淡入框文本叠加层

1 个答案: