许多错误

Question

我无法弄清楚如何将这两张照片分开。当您将鼠标悬停在另一个上时，另一个也会淡入。文本框在第一张照片上重叠。我想在页面上有6张照片。全部都有一个具有不同名称和内容的下拉列表。有人能告诉我如何解决这个问题吗？

https://jsfiddle.net/southernsweets12/txkpngbt/

Observable.Using

Answer 1

许多错误

在下面的代码中，我解释了我认为应该发生的事情，并对HTML，CSS和JavaScript应用了适当的修复。

没有重要的顺序我：

添加了a <!DOCTYPE ...> declaration。
Properly nested the HTML，同时删除不合适的标签并添加我发现丢失的标签。
更正了CSS hexadecimal color values，例如##DCDCDC→#DCDCDC。
添加了CSS以替换less semantically suitable and/or elegant <br>标记的使用。
Removed some unused CSS。
删除了内联onclick JavaScript函数调用，并将其替换为document.body上的one event listener。

通过应用这些更改，结果应该按照需要运行，并且还可以扩展以允许添加更多.container元素。
许多其他变化都是可能的，但是（src：Goodreads）

＆＃34;请记住，代码实际上是我们最终表达要求的语言。我们可以创建更接近要求的语言。我们可以创建工具来帮助我们将这些需求解析并组合成正式结构。但我们永远不会消除必要的精度 - 所以总会有代码。＆＃34; - Robert C. Martin

只有您知道＆＃34;要求＆＃34; 。

<!DOCTYPE html>
<html>
  <head>  
    <style>
      .container {
        width: 50%;
        position: relative;
      }
      .container:not(:first-child) {
        margin-top: 2em;
      }
      .image {
        opacity: 1;
        width: 100%;
        height: auto;
        display: block;
        backface-visibility: hidden;
        transition: opacity .5s ease;
      }
      .middle {
        top: 50%;
        left: 50%;
        opacity: 0;
        position: absolute;
        transition: opacity .5s ease;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
      }
      .container:hover .image {
        opacity: 0.3;
      }
      .container:hover .middle {
        opacity: 1;
      }
      .dropbtn {
        color: black;
        border: none;
        padding: 16px;
        font-size: 16px;
        cursor: pointer;
        background-color: #DCDCDC;
      }
      .dropdown {
        position: relative;
        display: inline-block;
      }
      .dropdown-content {
        z-index: 1;
        display: none;
        overflow: auto;
        min-width: 160px;
        position: absolute;
        background-color: #DCDCDC;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }
      .dropdown-content a {
        color: black;
        display: block;
        padding: 12px 16px;
        text-decoration: none;
      }
      .dropdown-content a:hover {
        text-decoration: underline;
      }
      .dropdown-content.show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" style="width: 100%;">
      <div class="middle">
        <div class="dropdown">
          <button class="dropbtn">Books</button>
          <div class="dropdown-content">
            <a href="http://www.mynerdydelights.com/search/label/books">All</a>
            <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
            <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4405/35532468424_c6ace22b6a_b.jpg" style="width: 100%;">
      <div class="middle">
        <div class="dropdown">
          <button class="dropbtn">TV</button>
          <div class="dropdown-content">
            <a href="http://www.mynerdydelights.com/search/label/tv%20shows">All</a>
            <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
            <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
          </div>
        </div>
      </div>
    </div>
    <script>
      // When the user clicks on the button, toggle between hiding and showing the dropdown content
      // Close the dropdown if the user clicks outside of it
      document.body.addEventListener( "click", function( evt ) {
        let trg = evt.target;
        if ( trg.classList.contains( "dropbtn" ) ) {
          trg.nextElementSibling.classList.toggle( "show" );
        } else {
          while ( trg = document.querySelector( ".dropdown-content.show" ) ) {
            trg.classList.remove( "show" );
          }
        }
      }, false );
    </script>
  </body>
</html>

以上代码转换为demo的嵌入式代码段：

＆＃13;

document.body.addEventListener("click", function(evt) {
  let trg = evt.target;
  if (trg.classList.contains("dropbtn")) {
    trg.nextElementSibling.classList.toggle("show");
  } else {
    while (trg = document.querySelector(".dropdown-content.show")) {
      trg.classList.remove("show");
    }
  }
}, false);

＆＃13;

.container {
  width: 50%;
  position: relative;
}

.container:not(:first-child) {
  margin-top: 2em;
}

.image {
  opacity: 1;
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
  transition: opacity .5s ease;
}

.middle {
  top: 50%;
  left: 50%;
  opacity: 0;
  position: absolute;
  transition: opacity .5s ease;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.dropbtn {
  color: black;
  border: none;
  padding: 16px;
  font-size: 16px;
  cursor: pointer;
  background-color: #DCDCDC;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  z-index: 1;
  display: none;
  overflow: auto;
  min-width: 160px;
  position: absolute;
  background-color: #DCDCDC;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown-content.show {
  display: block;
}

＆＃13;

<div class="container">
  <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" style="width: 100%;">
  <div class="middle">
    <div class="dropdown">
      <button class="dropbtn">Books</button>
      <div class="dropdown-content">
        <a href="http://www.mynerdydelights.com/search/label/books">All</a>
        <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
        <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <img alt="Avatar" class="image" src="https://farm5.staticflickr.com/4405/35532468424_c6ace22b6a_b.jpg" style="width: 100%;">
  <div class="middle">
    <div class="dropdown">
      <button class="dropbtn">TV</button>
      <div class="dropdown-content">
        <a href="http://www.mynerdydelights.com/search/label/tv%20shows">All</a>
        <a href="http://www.mynerdydelights.com/search/label/five%20things%20about%20books">Five Things About</a>
        <a href="https://www.blogger.com/blogger.g?blogID=6842912760136368596#contact">Hauls</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

带下拉菜单的照片

1 个答案:

许多错误