激活时更改菜单背景颜色

时间：2020-10-05 07:23:58

标签： html css 

.dropbtn {
  border: none;
  padding: 4px;
}

.dropbtn img {
  margin-top: 15px;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 75px;
  text-align: center;
  height: 55px;
}

.dropdown:hover {
  position: relative;
  display: inline-block;
  width: 75px;
  text-align: center;
  height: 55px;
  border-radius: 1px;
  border: 2px solid #202020;
}

.dropdown img {
  height: 25px;
  width: 25px;
}

a {
  text-decoration: none;
}

.dropdown-content {
  width: 75px;
  text-align: center;
  display: none;
  position: absolute;
  background-color: #141414;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  padding-top: 4px;
  padding-bottom: 4px;
  top: 50px;
}

.dropdown-content a {
  padding: 11px 4px;
  text-decoration: none;
  display: block;
  border-radius: 40px;
  width: 50px;
  height: 50px;
  margin: auto;
  border: 1px solid #191919;
}

.dropdown-content a:hover {
  background-color: #141414;
  border: 1px solid #848484;
}

.dropdown:hover .dropbtn,
.active {
  background-color: #191919;
  opacity: 25%;
}
  <header>
    <div class="container">
      <div class="header-container">
        <div class="logo">
          <a href="#"><img src="logo.svg" alt="" style="width: 209px;"></a>
        </div>

        <div class="language dropdown">
          <a href="#" class="dropbtn"><img src="elements/can.png" alt=""></a>
          <div class="dropdown-content" style="display: none;">
            <a href="#"><img src="elements/aus.png" alt="new zealand flag"></a>
            <a href="#" class="active"><img src="elements/can.png" alt="canada flag"></a>
            <a href="#"><img src="elements/sou.png" alt="quebec flag"></a>
            <a href="#"><img src="elements/ger.png" alt="germany flag"></a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="main-content">
        <div class="star">
          <img src="img-bg.svg" alt="">
          <div class="content">
            <h1 class="logo-middle"><img src="logo.svg" alt=""></h1>
            <h1 class="title"><span>H1</span> Title</h1>
            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus
              a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor </p>
          </div>
        </div>

      </div>
    </div>
  </div>

  <footer>
    <p>All rights reserved</p>
  </footer>
  <div class="overlay"></div>
  <script>
    let dcontent = document.querySelector(".dropdown-content")

    document.querySelector(".dropdown").addEventListener("click", showLan)

    function showLan() {


      if (dcontent.style.display == "none") {
        dcontent.style.display = "block"
        document.querySelector(".overlay").style.display = "block"
      }
      document.querySelector(".overlay").addEventListener("click", function() {
        dcontent.style.display = "none"
        document.querySelector(".overlay").style.display = "none"
      })

    }
  </script>

启用后，我无法更改语言菜单的背景颜色；悬停时，语言菜单应具有较细的边框；当活动的顶部语言图标应具有较浅的灰色背景时，如图3所示，我几乎尝试了所有操作并且无法正常工作，而是像悬停时那样具有灰色边框而不是灰色背景。

enter image description here

1 个答案:

答案 0 :(得分：0)

您需要将.dropdown和.dropdown-content包装在div容器上，并实现一些CSS样式规则。

在这里尝试查看我的演示

.dropdown-container {
  position: relative;
  z-index: 2;
  width: max-content;
}

.dropbtn {
  border: none;
  padding: 4px;
}

.dropbtn img {
  margin-top: 15px;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 75px;
  text-align: center;
  height: 55px;
}

.dropdown:hover {
  position: relative;
  display: inline-block;
  width: 75px;
  text-align: center;
  height: 55px;
  border-radius: 1px;
}

.dropdown img {
  height: 25px;
  width: 25px;
}

a {
  text-decoration: none;
}

.dropdown-content {
  width: 75px;
  text-align: center;
  display: none;
  position: absolute;
  background-color: #141414;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding-top: 4px;
  padding-bottom: 4px;
}

.dropdown-content a {
  padding: 11px 4px;
  text-decoration: none;
  display: block;
  border-radius: 40px;
  width: 50px;
  height: 50px;
  margin: auto;
  border: 1px solid #191919;
}

.dropdown-content a:hover {
  background-color: #141414;
  border: 1px solid #848484;
}

.dropdown:hover,
.active {
  background-color: #191919;
  opacity: 25%;
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}
.display {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>head</title>
  </head>

  <body>
    <header>
      <div class="container">
        <div class="header-container">
          <div class="logo">
            <a href="#"><img src="logo.svg" alt="" style="width: 209px;" /></a>
          </div>
          <div class="dropdown-container">
            <div class="language dropdown">
              <a href="#" class="dropbtn"><img src="Sphere.png" alt="" /></a>
            </div>
            <div class="dropdown-content">
              <a href="#"><img src="Sphere.png" /></a>
              <a href="#" class="active"><img src="Sphere.png" /></a>
              <a href="#"><img src="Sphere.png" /></a>
              <a href="#"><img src="Sphere.png" /></a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="main">
      <div class="container">
        <div class="main-content">
          <div class="star">
            <img src="img-bg.svg" alt="" />
            <div class="content">
              <h1 class="logo-middle"><img src="logo.svg" alt="" /></h1>
              <h1 class="title"><span>H1</span> Title</h1>
              <p>
                This is Photoshop's version of Lorem Ipsum. Proin gravida nibh
                vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
                nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit
                amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio
                tincidunt auctor
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p>All rights reserved</p>
    </footer>
    <div class="overlay"></div>
    <script>
      const dcontent = document.querySelector(".dropdown-content");
      const overlay = document.querySelector(".overlay");
      document.querySelector(".dropdown").addEventListener("click", () => {
        dcontent.classList.toggle("display");
        overlay.classList.toggle("display");
      });
      overlay.addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
          dcontent.classList.toggle("display");
          overlay.classList.toggle("display");
        },
        false
      );
    </script>
  </body>
</html>

您也可以转到密码框https://codesandbox.io/s/amazing-thunder-k38kd?file=/index.html

相关问题
最新问题