Hol*_*ddo 1 html javascript css
我在 JS 中的转换有问题。我想要的是，一旦 div 的不透明度为 0，js 就会自动将其删除。问题是，我必须退出 div 区域，然后将其删除。那是因为我有一个 mouseleave，但我的问题是。如何在鼠标不离开 div 区域的情况下删除该 div？这是CodePen链接：
https://codepen.io/SpeedItaly/pen/PoGPGJZ
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("mouseleave", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->您可以改用该transitionend事件。
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("transitionend", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->