html - 带有可悬停下拉菜单的文本框淡入淡出

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

首先，将dropdown-content移到middle内容中，因为CSS hover如果不是父元素是访问不到的，可以这样改HTML标记。

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

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

我认为它的工作方式如您所愿。如果悬停在中间，下拉内容始终会显示。