菜单Javascript下划线阻止下拉菜单正常工作

Question

我在菜单上添加了下划线，以供人们在鼠标悬停时使用。问题是下拉菜单不再起作用。

我可以告诉您javascript函数的目标是所有锚链接。那么，解决下拉菜单问题的最佳方法是什么？我是否应该更改QuerySelectorAll以使用这些类而不是Anchor链接，还要在希望下划线显示的菜单周围添加更多的类/ div？

想知道什么是解决此问题的正确方法？请仅在桌面上查看。我将在移动设备上删除此功能。

https://codepen.io/rubenjr005/pen/ExjQdjw

(function() {

  const target = document.querySelector(".target");
  const links = document.querySelectorAll(".mynav a");
  const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

  function mouseenterFunc() {
    if (!this.parentNode.classList.contains("active")) {
      for (let i = 0; i < links.length; i++) {
        if (links[i].parentNode.classList.contains("active")) {
          links[i].parentNode.classList.remove("active");
        }
        links[i].style.opacity = "0.25";
      }

      this.parentNode.classList.add("active");
      this.style.opacity = "1";

      const width = this.getBoundingClientRect().width;
      const height = this.getBoundingClientRect().height;
      const left = this.getBoundingClientRect().left + window.pageXOffset;
      const top = this.getBoundingClientRect().top + window.pageYOffset;
      const color = colors[Math.floor(Math.random() * colors.length)];

      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
      target.style.borderColor = color;
      target.style.transform = "none";
    }
  }

  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("click", (e) => e.preventDefault());
    links[i].addEventListener("mouseenter", mouseenterFunc);
  }

  function resizeFunc() {
    const active = document.querySelector(" .mynav li.active");

    if (active) {
      const left = active.getBoundingClientRect().left + window.pageXOffset;
      const top = active.getBoundingClientRect().top + window.pageYOffset;

      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
    }
  }

  window.addEventListener("resize", resizeFunc);

})();


/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');


/* 
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6

*/



* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}


.color-overlay-container {
    justify-content: center;
    align-items: center;
    position: relative;
}

.color-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    z-index: 2;
    position: absolute;
}


.btn-black{
    padding: 1.5rem 2rem;
    color: white;
    background: black;
    text-transform: uppercase;
    font-weight: 900;
}

.btn-yellow{
    padding: 1.5rem 2rem;
    color:  white;
    background: #f7c51e;
    text-transform: uppercase;
    font-weight: 900;
}


body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

a {
    text-decoration: none;
}


p {
    margin: .5rem 0;
}

/* Utility Classes */

/* Grid Container */


.grid-container {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin: auto;
  grid-auto-rows: minmax(200px, auto);
}

.grid-container-2 {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin: auto;
}

.card {
    background: #fff;
    padding: 1rem;
}


/* Grid Container - END */


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}


.text-yellow {
    color: #f7c51e;
}

.bg-yellow {
    background: #f7c51e;
    color: black;
}

.bg-grey {
    background: #f9f9f9;
    color: black;
}


.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.m-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.lead {
    font-size: 1.3rem;
    margin: 0.75rem 0;
}



/* Padding */

.py-1 {
    padding: 1.5rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}


/* All Around Padding */

.p-1 {
    padding: 1.5rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}


/* Utility Classes - END */



/* ================  HOME PAGE ==================== */


/* HEADER */



.site-header {
    background-color: transparent;
}

.site-header .header-container {
    background: black;
    color: white;
}

/* BLACK BAR */

.site-header .header-container .header-container_wrap {
    padding: 30px 5px;
    /* background: red; */
}

#masthead .header-container .header-container_wrap .items {
    display: flex;

}

#masthead .header-container .header-container_wrap .items .contact-info {
    display: flex;

}

#masthead .header-container .header-container_wrap .items .quality-logo {
    margin-right: 3rem;
    line-height: 5px;
}

#masthead .header-container .header-container_wrap .items .quality-logo p {
    font-size: 14px;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

#masthead .header-container .header-container_wrap .items .item .facebook-like {
    text-align: center;
}



#masthead .header-container .header-container_wrap .items .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
}


#masthead .header-container .header-container_wrap .items .contact-info .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
    background: black;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #363636;
}

/* ========================== Bottom White Header Menu  - START ================ */


/* Menu Underline */


.mynav a {
    display: block;
    font-size: 20px;
    color: black;
    text-decoration: none;
    padding: 7px 15px;
  }
  
  .target {
    position: absolute;
    border-bottom: 4px solid transparent;
    z-index: 100;
    transform: translateX(-60px);
  }
  
  .mynav a,
  .target {
    transition: all .35s ease-in-out;
  }



/* Add a black background color to the top navigation */
.topnav {
    background-color: white;
    overflow: hidden;
    padding: 1rem;

  }


  #myTopnav .items {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  

  #myTopnav .items .item .mynav ul{
      display: flex;
      align-items: center;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    /* float: left;
    display: block; */
    color: rgb(94,94,94);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* Add an active class to highlight the current page */

/*     
    .active {
     color: black;
    font-weight: 600; 
    color: #363636;
   }  */
  

  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  

  /* ============================ DROP DOWN MENU =============================== */
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    /* float: left; */
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: rgb(94,94,94);
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f7c51e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: rgb(94,94,94);
  }
  
  /* Style the links inside the dropdown */
.mynav   .dropdown-content a {
    font-size: 14px;
    font-weight: 500;
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-transform: uppercase;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    /* background-color: red; */
    color: black;
    

  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    /* background-color: red; */
    color: black;
    
  }

  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
    z-index: 101;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  /* @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  } */
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  /* @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  } */


  /* SEARCH ICONS */

  #myTopnav .items .item .fa-search{
      font-size: 1.25rem;
      color: #363636;
  }




/* ========================== Bottom White Header Menu - END ================ */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
        integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
    <!-- CSS STYLES -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css">


    <!-- Swiper Header Slider -->
    <!-- <link rel="stylesheet" href="/css/swiper.min.css"> -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> -->


    <title>Document</title>
</head>

<body id="home">


    <!-- Header Container -->

    <!-- Navbar-Black -->
    <div id="masthead" class="site-header">
        <nav class="header-container">

            <!-- Top Black Header Bar -->
            <div class="header-container_wrap">
                <div class="container">
                    <div class="items">
                        <div class="quality-logo">
                            <img            src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo">
                            <p>Offering Quality work at a fair price to the Central Texas area.</p>
                        </div>
                        <div class="contact-info">
                            <div class="item">
                                <i class="fas fa-phone"></i>
                                <div class="contact-block__value-wrap">
                                    <p> Call Today</p>
                                    <p><strong>(972)-555-5555</strong></p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-clock"></i>
                                <div class="contact-block__value-wrap">
                                    <p>Mon-Fri:<strong> 7am to 7pm</strong></p>
                                    <p>Sat & Sun: 9am-4pm</p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-map-marker-alt"></i>
                                <p>Serving Central Texas</p>
                            </div>
                            <div class="item">
                                <div class="facebook-like">
                                    <i class="fab fa-facebook-f"></i>
                                    <p>LIKE US</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ======================== Bottom White header START ======================-->


            <div class="topnav" id="myTopnav">
                <div class="container">
                    <div class="items">
                        <div class="item">
                            <nav class="mynav">

                                <!-- <a href="#home" class="active">Menu Click Here</a> -->
                                <!-- Hamburger -->
                                <ul>
                                    <div class="hamburger">
                                        <!-- <p class="active">Menu Click Here</p> -->
                                        <a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p>  &#9776;</a>
                                    </div>
                                    <li><a href="#home">About</a>
                                    
                                    <!-- DROPDOWN MENU -->
                                    
                                        <li>
                                            <div class="dropdown">
                                                <button class="dropbtn">
                                                
                                                    <a href="">Services <i class="fa fa-caret-down"></i></a>
                                                    
                                                </button>
                                                
                                                <div class="dropdown-content">
                                                    <a href="#">Brush Mulching & Land Clearing</a>
                                                    <a href="#">Mapping & Measurement</a>
                                                    <a href="#">Erosion Mitigation / Driveways / Roads</a>
                                                    <a href="#">Landscaping & Drainage Management</a>
                                                    <a href="#">Foundation & Pads</a>
                                                    <a href="#">General Dirt Work & Tank Pond Trenching</a>
                                                    <a href="#">Demolition & Clean Up</a>
                                                    <a href="#">Septic Installation</a>
                                                </div>
                                            </div>
                                        </li>
                                  
                                    <!-- DROPDOWN MENU END -->
                                    
                                    <li><a href="#home">Photo Gallery</a></li>
                                    <li><a href="#home">Video Example</a></li>
                                    <li><a href="#home">Contacts</a></li>
                                    <!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> -->
                                </ul>
                            </nav>
                            

                        </div>

                        <div class="item">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>

                </div>
            </div>
            <span class="target"></span>

            <!-- ======================== Bottom White header END ======================-->
            
        </nav>
    </div>

    <!-- HEADER CONTAINER END -->

Answer 1

问题是.target元素位于按钮顶部。因此，不会触发hover。如果使.target具有pointer-events: none;，它将解决您的问题。