html – 将鼠标悬停在导航链接上以显示单独的div

2023年10月15日 239次阅读

我想要做的是在我的导航栏中有一个名为“天气”的链接,当你将鼠标悬停在它上面或点击它时,我希望它显示一个带有天气网络小部件的下拉列表.

这就是我到目前为止所拥有的.悬停部分可以工作,但它会将“天气”链接推送到导航栏的底部.如何让它恢复原来的位置？

    <div id="navbar"> 
        <ul> 
            <li><a href="#">Home <img src="home.png" /></a></li> 
            <li><a href="#">Forum <img src="forum.png" /></a></li> 
            <li><a href="#">Pictures <img src="camera.png" /></a></li> 
            <li><a href="#">Videos <img src="videos.png" /></a></li> 
            <li><a href="#">Technology <img src="technology.png" /></a></li>
            <li><a href="#">Politics <img src="politics.png" /></a></li> 
            <li><a href="#">World Issues <img src="issues.png" /></a></li> 
            <li><a href="#">Contact <img src="contact.png" /></a> 
            <li><a href="#"><div id="div1">Weather <img src="weather.png" /></a><div id="div2">testing</div></div></li> 
        </ul> 
    </div>

而CSS：

#div1 {
    cursor:pointer;
 }
#div2 {
    display:none;
    height: 20px;
    width: 100px;
    background-color: white;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 20;
 }
#div1:hover #div2 {
    display:block;
 }

看起来像是Here is an image.

最佳答案 首先,您应该修复HTML.用这个替换你的divs行(为了我的答案的可读性,我正在重新格式化它)：

<li id="div1">
    <a href="#">Weather <img src="weather.png" /></a>
    <div id="div2">testing</div>
</li>

然后,尝试这个CSS代码：

#div1 {
    position: relative;
}
#div1 > a {
    cursor:pointer;
}
#div2 {
    position: absolute;
    top: 100%;
    left: 0;

    display:none;
    height: 20px;
    width: 100px;
    background-color: white;
    z-index: 20;
 }
 #div1:hover #div2 {
    display:block;
 }

它的工作原理是,当您将绝对定位元素放置在相对定位元素内时,绝对元素将根据相对元素的边界定位自身.因此,top：100％将#div2的顶部放在#div1的底部.

点赞