HTML按鈕顯示，但您無法與之互動-有解無憂

我的網頁上有一個 HTML 按鈕。它會顯示，但您無法與之互動。懸停和單擊按鈕似乎都無濟于事。當您單擊按鈕時，應該會出現一個選單，而當您將滑鼠懸停時，該按鈕應該會變成紅色。問題是按鈕無法互動。

var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");

var mobileMenuButtonOnClick = function() {
  mobileMenu.classList.remove("hidden");
};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.mr-0 {
  margin-right: 0;
}

.ml-auto {
  margin-left: auto;
}

.d-block {
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
}

.nav-bar {
  z-index: 98;
  background-color: rgba(204, 204, 204, 0.8);
  padding: 15px;
}

.nav-img {
  height: 100px;
}

.nav-options {
  float: right;
  padding-right: 50px;
}

.nav-option {
  border: none;
  background-color: rgba(204, 204, 204, 0.1);
  height: 100px;
  width: 150px;
  font-size: large;
  cursor: pointer;
  transition: all 0.5s ease-out;
  position: relative;
  bottom: 15px;
}

.hidden {
  display: none;
}

.line {
  width: 50px;
  background-color: white;
  z-index: 99;
  height: 0.5px;
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav-options {
  display: table;
}

.hamburger-menu {
  background-color: transparent;
  border: none;
  position: relative;
  left: 50px;
}

.hamburger-menu :hover {
  color: red;
}

.desktop-nav {
  display: none;
}

.mobile-nav {
  display: block;
}

<div class="nav-bar">
  <nav class="mobile-nav">
    <a href="index.html"><img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" class="nav-img"></a>
    <div class="nav-options">
      <button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
                      <div class="line"></div><br>
                       <div class="line"></div><br>
                      <div class="line"></div>
                      The button that is not working
                    </button>
    </div>
  </nav>

  <div class="hidden" id="mobile-menu-id">
    the menu
  </div>
</div>

uj5u.com熱心網友回復：

洗掉和之間.hamburger-menu的空格:hover。作品活動click。mobileMenuButton

var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");

var mobileMenuButtonOnClick = function() {
  mobileMenu.classList.remove("hidden");
};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.mr-0 {
  margin-right: 0;
}

.ml-auto {
  margin-left: auto;
}

.d-block {
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
}

.nav-bar {
  z-index: 98;
  background-color: rgba(204, 204, 204, 0.8);
  padding: 15px;
}

.nav-img {
  height: 100px;
}

.nav-options {
  float: right;
  padding-right: 50px;
}

.nav-option {
  border: none;
  background-color: rgba(204, 204, 204, 0.1);
  height: 100px;
  width: 150px;
  font-size: large;
  cursor: pointer;
  transition: all 0.5s ease-out;
  position: relative;
  bottom: 15px;
}

.hidden {
  display: none;
}

.line {
  width: 50px;
  background-color: white;
  z-index: 99;
  height: 0.5px;
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav-options {
  display: table;
}

.hamburger-menu {
  background-color: transparent;
  border: none;
  position: relative;
  left: 50px;
}

.hamburger-menu:hover {
  color: red;
}

.desktop-nav {
  display: none;
}

.mobile-nav {
  display: block;
}

<div class="nav-bar">
  <nav class="mobile-nav">
    <a href="index.html"><img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" class="nav-img"></a>
    <div class="nav-options">
      <button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
                      <div class="line"></div><br>
                       <div class="line"></div><br>
                      <div class="line"></div>
                      The button that is not working
                    </button>
    </div>
  </nav>

  <div class="hidden" id="mobile-menu-id">
    the menu
  </div>
</div>

uj5u.com熱心網友回復：

您始終可以使用 classList 物件中的.toggle()方法來最好地與左側選單上的隱藏和顯示互動。此外，要模擬漢堡選單，請改用 SVG 代碼，使其看起來更專業，并添加您正在尋找的紅色背景，類似于下面代碼中的那個。看看這段代碼。我當然希望這會有所幫助，朋友！

var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");

var mobileMenuButtonOnClick = function() {
  mobileMenu.classList.toggle("hidden");
};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

body,
html {
    height: 100%;
}

body {
    overflow-x: hidden;
    font-size: large;
    margin: 0;
}

.mr-0 {
    margin-right: 0;
}

.ml-auto {
    margin-left: auto;
}

.d-block {
    display: block;
}

h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', sans-serif;
}

.nav-bar {
    z-index: 98;
    background-color: rgba(204, 204, 204, 0.8);
    padding: 15px;
}

.nav-img {
    height: 100px;
}

.nav-options {
    float: right;
    padding-right: 50px;
}

.nav-option {
    border: none;
    background-color: rgba(204, 204, 204, 0.1);
    height: 100px;
    width: 150px;
    font-size: large;
    cursor: pointer;
    transition: all 0.5s ease-out;
    position: relative;
    bottom: 15px;
}

.hidden {
    display: none;
}

.line {
    width: 50px;
    background-color: white;
    z-index: 99;
    height: 0.5px;
}

.mobile-nav {
    display: none;
    position: relative;
}

.mobile-nav-options {
    display: table;
}

.hamburger-menu {
    background-color: transparent;
    border: none;
    position: relative;
    left: 50px;
}

.hamburger-menu:hover {
    background-color: red;
    border-radius: 4px;
}

.desktop-nav {
    display: none;
}

.mobile-nav {
    display: block;
}

<div class="nav-bar">
   <nav class="mobile-nav">
      <a href="index.html"><img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" class="nav-img"></a>
      <div class="nav-options">
         <button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
            <!--?xml version="1.0" ?-->
            <svg style="color: white" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
               <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" fill="white"></path>
            </svg>
         </button>
      </div>
   </nav>
   <div class="hidden w-50" id="mobile-menu-id">
      MENU GOES HERE
   </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515814.html

標籤：javascripthtmlcss按钮

上一篇：Delphi11.2Speedbuttons在設計時不顯示邊框

下一篇：如何為標準閃亮動作按鈕添加陰影和更改顏色？