当人们用鼠标悬停在菜单上时，我在菜单上添加了下划线。问题是下拉菜单不再工作。
我可以看出javascript函数的目标是所有的锚链接。那么，解决下拉菜单问题的最佳方法是什么呢？我是否应该将QuerySelectorAll更改为类而不是锚链接，并在我希望下划线位于其下的菜单周围添加更多的类/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> ☰</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()">☰</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 -->问题是.target元素正在占据按钮的顶部。因此CCD_ 2不会被触发。如果你让.target有pointer-events: none;，它会解决你的问题。
.target{
pointer-events: none;
}
Codepen示例。
请注意，您还需要给"照片库"li一些margin-left，因为它位于"服务"按钮下方，并在特定点上扰乱了悬停。