gpt4 book ai didi

html - 如何利用悬停在另一个 div 下面的 div 上

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

我尝试在我的网站侧面制作一个菜单,当鼠标悬停在上面时会弹出。首先,我扩展了它的宽度,但文本看起来很奇怪,所以我想我会使用 CSS 动画来更改 div 的位置,使其向右移动。我遇到的问题是那些菜单 div 覆盖了“主”div。将这些 div 置于主 div 下的唯一方法是使用 z-index: -1 但随后 :hover 不再起作用。我试过 pointer-events: none; 但这似乎也不起作用。

<div id="container">
<div id="header">
<img id="mainpic" src="pokebalicon.png" />
</div>
<div class="sidediv" id="first">
<p>Homepage</p>
</div>
<div id="mainpage">
text
</div>
</div>

和 CSS

#container {
width: 820px;
height: 700px;
margin: 100px auto;
position: relative;
}
#header {
padding: 10px;
height: 100px;
width: 100%;
background-color: transparent;
overflow: hidden;
}
#mainpage {
height: 600px;
width: 100%;
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
border: 1px solid #D5D4D4;
pointer-events: none;
}
.sidediv{
position: absolute;
left: 721px;
height: 40px;
width: 170px;
text-align: center;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 0 5px 5px 0;
z-index: -1;
}

.sidediv:hover 启动一个动画,该动画将 left 更改为看起来像是被拉出。但遗憾的是,将鼠标悬停在 sidediv 上时没有任何反应。知道如何解决这个问题吗?

悬停看起来像这样:

.sidediv:hover{
-webkit-animation: example 0.5s forwards;
animation: example 0.5s forwards;
}
@-webkit-keyframes example {
100% {left: 841px;}
}
@keyframes example {
100% {left: 841px;}
}

最佳答案

试试这个

#container {
width: 820px;
height: 700px;
margin: 100px auto;
position: relative;
}

#header {
padding: 10px;
height: 100px;
width: 100%;
background-color: transparent;
overflow: hidden;
}

#mainpage {
height: 600px;
width: 100%;
background-color: #FFFFFF;
border-radius: 10px;
padding: 20px;
border: 1px solid #D5D4D4;
}

.sidediv {
position: absolute;
left: 721px;
top: 80px;
height: 40px;
width: 170px;
text-align: center;
margin-top: 50px;
border: 1px solid #000000;
border-radius: 0 5px 5px 0;
z-index: -1;
transition: 0.7s
}

#container #mainpage:hover + .sidediv {
z-index: 1;
background: pink;
left: 0px
}
<div id="container">
<div id="header">
<img id="mainpic" src="http://i.imgur.com/IMiabf0.jpg" />
</div>
<div id="mainpage">
text
</div>
<div class="sidediv" id="first">
<p>Homepage</p>
</div>

</div>

关于html - 如何利用悬停在另一个 div 下面的 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35221881/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com