gpt4 book ai didi

css - 将鼠标悬停在背景文本上时下拉菜单消失

转载 作者:行者123 更新时间:2023-11-28 00:11:57 25 4
gpt4 key购买 nike

我无法在我正在开发的网站上使用主下拉菜单,因为如果你移动得太慢,或者如果你将鼠标悬停在它后面的子元素中背景中的文本上,它就会消失。

我试过添加 !important 标签。我试过寻找元素之间的任何差距。我试过调整 z 轴优先级值。

.dropdown {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropdown:hover .dropdown-content {display:block !important;}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar:hover .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar:hover .second {
opacity: 0;
transition: all 0.5s;
}
.navbar:hover .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar:hover {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
</style>
<div class="dropdown" style="background-color:black;">
<button class="dropbtn" style="background-color:black;">
<div class="navbar">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">IT</a></td>
<td><a href="#">Science</a></td>
<td><a href="#">Tech</a></td>
<td><a href="#">News</a></td>
<td><a href="#">Top</a></td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
</body>
</html>

我希望下拉菜单能够相对灵活地消失。不是,它几乎无法使用。

最佳答案

现在点击菜单!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dropdownzzz {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}

.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar.active .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar.active .second {
opacity: 0;
transition: all 0.5s;
}
.navbar.active .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar.active {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
.dropdown-content.active {
display: block;
}
</style>
<div class="dropdownzzz" style="background-color:black;">
<button class="dropbtn" style="background-color:black;" id="menu">
<div class="navbar" id="iconmenu">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content" id="there">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">IT</a></td>
<td><a href="#">Science</a></td>
<td><a href="#">Tech</a></td>
<td><a href="#">News</a></td>
<td><a href="#">Top</a></td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
<script>
$('#menu').on('click', function () {
$('#there').toggleClass('active');
$('#iconmenu').toggleClass('active');
});
</script>

关于css - 将鼠标悬停在背景文本上时下拉菜单消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55344797/

25 4 0