个人中心
gpt4 book ai didi

css - 页面底部的页脚并在将鼠标悬停在下拉菜单上时停止移动文本

转载 作者：太空宇宙 更新时间：2023-11-03 22:32:00 26 4
gpt4 key购买 nike

我试图让我的页脚在没有足够内容时始终显示在页面底部。我尝试了几种解决方案，但都没有奏效。此外，下拉菜单还有一个小问题——当我将鼠标悬停在该组件上时，文本会移动。我应该在 CSS 中更改什么？谢谢!

$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    color: #333;
}

p {
    padding: 10px;
}

#navigation ul {
	margin: 0;
	padding: 0;
	width: auto;
	list-style-type: none;
	text-align: center;
	display: inline-block;
}

#navigation {
	text-align: center;
}

#navigation ul li {
	float: left;
	font-weight: bold;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	width: 140px;
}

#navigation ul li:hover {
	background: #9D9FA4;
	border-radius: 10px;
}

ul li a {
	text-decoration: none;
	color: #FFFFFF;
}

ul li li {
	background: #3F61A9;
	color: #fff;
	display: none;
}

ul li li:hover {
	background: #9D9FA4;
}

ul li li a{
	text-decoration: none;
	color: #fff;
}


#wrapper {
    margin: 0 auto;
    width: 1000px;
}

#headerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
	position: relative; 
}

#header {
    height: 125px;
    background: #000000;
    border-radius: 10px;
    border: 1px solid #000000;
    margin: 5px;
	position: relative;
}

#navigationwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
	position: relative;
}

#navigation {
    height: 40px;
    background: #52bf6e;
    border-radius: 10px;
    border: 1px solid #3ea858;
    margin: 5px;
}

#contentwrap {
    width: 700px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    margin: 5px;
}

#leftcolumnwrap {
    width: 150px;
    float: left;
    margin: 0 auto;
}

#leftcolumn {
    border-radius: 10px;
    margin: 5px;
}

#rightcolumnwrap {
    width: 150px;
    float: left;
    margin: 0 auto;
}

#rightcolumn {
    border-radius: 10px;
    margin: 5px;
}

#footerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    height: 40px;
    background: #9D9FA4;
    border-radius: 10px;
    border: 1px solid #888a91;
    margin: 5px;
	background-color: #9D9FA4;
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
}

#navigationwrap_placeholder {
    display:none;
	height: 40px;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
        </div>
        </div>
        <div id="navigationwrap">
        <div id="navigation">
			<ul>
			<li><a href="">main menu</a></li>
			<li><a>test</a>
			<ul class="sub-menu">
				<li><a href="">test1</a></li>
				<li><a href="">test2</a></li>
				<li><a href="">test3</a></li>
				<li><a href="">test4</a></li>
			</ul>
			</li>
			</ul>
        </div>
        </div>
		<div id="navigationwrap_placeholder"></div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
            <p></p>
        </div>
        </div>
        <div id="contentwrap">
        <div id="content">
			<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
			<br><br>
		</div>
        </div>
        <div id="rightcolumnwrap">
        <div id="rightcolumn">
            <p></p>
        </div>
        </div>
        <div id="footerwrap">
        <div id="footer">
        </div>
        </div>
    </div>
</body>
</html>

最佳答案

您需要使用 position:fixed 将页脚放在页面底部。

#footerwrap {
    width: 1000px;
    margin: 0 auto;
    position: fixed;
    bottom:0;
}

至于文本移动 slideToggle 似乎是在移动测试列表项的填充。通过在样式本身中设置填充，它可以解决问题。

    <li ><a style="padding:0 38%">test</a>

关于css - 页面底部的页脚并在将鼠标悬停在下拉菜单上时停止移动文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48140545/

26 4 0
文章推荐： html - 垂直调整 3 个 div 中的 1 个以适应窗口？
文章推荐： c# - 冗余代码是在编译器中管理还是每次都执行？
文章推荐： c# - 如何将 Sprite 完全移出屏幕？
文章推荐： html - 将鼠标悬停在另一个 div 上时更改一个 div 的样式
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com