我正在建立一个具有响应能力的网站,我需要在屏幕中间居中放置一个固定的页脚导航,将其悬停在上方可以激活一个下拉菜单。我对所有内容都只使用百分比(从长远来看,这很重要,可以使标题在宽度方向上对齐),这使所有内容都有些混乱。
每当我将鼠标悬停在INFO
上(请参阅我的JSFiddle)并尝试将鼠标向上移向子菜单时,一旦离开INFO
,子菜单就会掉落。当我从position
中删除css属性:width
,bottom
,margin-bottom
和#footer-nav ul li:hover > ul
时(实际上是将下拉菜单变成一个下拉菜单,向下菜单),即使我将鼠标移到子菜单上,子菜单仍保持打开状态。我什至可以将margin-bottom
更改为20%
,子菜单仍将保持打开状态,并移至该空白区域。当我使它成为下拉菜单而不是下拉菜单时,是什么使它接近?
在悬停触发的地方我也有一个问题。我可以将鼠标移到INFO
的左侧/右侧,子菜单仍然会弹出。如何使用当前的div
并设置百分比和居中来解决此问题?
以下是相关代码:
<div id="background">
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter"><a href="https://twitter.com"
target="_blank">TWITTER</a></li>
<li id="instagram"><a href="https://www.instagram.com"
target="_blank">INSTAGRAM</a></li>
<li id="email"><a href="mailto:email@email.com">EMAIL</a></li>
</ul>
</li>
</ul>
</div>
</footer>
</div>
#background {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
#footer {
position: fixed;
bottom: 0;
width: 25%;
text-align: center;
margin-bottom: 1%;
margin-left: -15%;
left: 50%;
margin-left: -12.5%;
}
a {
text-decoration: none;
color: inherit;
}
#footer-nav ul li:hover > ul {
display: block;
position: absolute;
width: 100%;
bottom: 100%;
margin-bottom: 2%;
}
#footer-nav {
width: 100%;
}
#footer-nav ul {
font-family: Arial;
font-size: 100%;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer-nav ul ul {
font-family: Arial;
font-size: 100%;
color: #000000;
list-style-type: none;
font-weight: normal;
display: none;
}
#email {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#instagram {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#twitter {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
答案 0 :(得分:0)
问题来自margin-bottom: 2%
上的#footer-nav ul li:hover > ul
。当您从Info
按钮移到此页边距时,您不再需要将鼠标悬停在有问题的元素上。要更正此问题,只需将其替换为padding-bottom: 2%
:
$(document).ready(function() {
$("#email").hover(function() {
$("#email").css("background-color", "black");
}, function() {
$("#email").css("background-color", "white");
});
});
$(document).ready(function() {
$("#email").hover(function() {
$("#email").css("color", "white");
}, function() {
$("#email").css("color", "black");
});
});
$(document).ready(function() {
$("#twitter").hover(function() {
$("#twitter").css("background-color", "black");
}, function() {
$("#twitter").css("background-color", "white");
});
});
$(document).ready(function() {
$("#twitter").hover(function() {
$("#twitter").css("color", "white");
}, function() {
$("#twitter").css("color", "black");
});
});
$(document).ready(function() {
$("#instagram").hover(function() {
$("#instagram").css("background-color", "black");
}, function() {
$("#instagram").css("background-color", "white");
});
});
$(document).ready(function() {
$("#instagram").hover(function() {
$("#instagram").css("color", "white");
}, function() {
$("#instagram").css("color", "black");
});
});
#background {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
#footer {
position: fixed;
bottom: 0;
width: 25%;
text-align: center;
margin-bottom: 1%;
margin-left: -15%;
left: 50%;
margin-left: -12.5%;
}
a {
text-decoration: none;
color: inherit;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
width: 100%;
bottom: 100%;
padding-bottom: 2%;
}
#footer-nav {
width: 100%;
}
#footer-nav ul {
font-family: Arial;
font-size: 100%;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer-nav ul ul {
font-family: Arial;
font-size: 100%;
color: #000000;
list-style-type: none;
font-weight: normal;
display: none;
}
#email {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#instagram {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#twitter {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background">
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter"><a href="https://twitter.com" target="_blank">TWITTER</a></li>
<li id="instagram"><a href="https://www.instagram.com" target="_blank">INSTAGRAM</a></li>
<li id="email"><a href="mailto:email@email.com">EMAIL</a></li>
</ul>
</li>
</ul>
</div>
</footer>
</div>
还请注意,您可以将所有功能合并为一个$(document).ready
,也可以合并.css()
规则。这将大大减少行数,提高可读性。我在以下示例中完成了此操作:
$(document).ready(function() {
$("#email").hover(function() {
$("#email").css("background-color", "black");
$("#email").css("color", "white");
}, function() {
$("#email").css("background-color", "white");
$("#email").css("color", "black");
});
$("#twitter").hover(function() {
$("#twitter").css("background-color", "black");
$("#twitter").css("color", "white");
}, function() {
$("#twitter").css("background-color", "white");
$("#twitter").css("color", "black");
});
$("#instagram").hover(function() {
$("#instagram").css("background-color", "black");
$("#instagram").css("color", "white");
}, function() {
$("#instagram").css("background-color", "white");
$("#instagram").css("color", "black");
});
});
#background {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
#footer {
position: fixed;
bottom: 0;
width: 25%;
text-align: center;
margin-bottom: 1%;
margin-left: -15%;
left: 50%;
margin-left: -12.5%;
}
a {
text-decoration: none;
color: inherit;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
width: 100%;
bottom: 100%;
padding-bottom: 2%;
}
#footer-nav {
width: 100%;
}
#footer-nav ul {
font-family: Arial;
font-size: 100%;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer-nav ul ul {
font-family: Arial;
font-size: 100%;
color: #000000;
list-style-type: none;
font-weight: normal;
display: none;
}
#email {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#instagram {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#twitter {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background">
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter"><a href="https://twitter.com" target="_blank">TWITTER</a></li>
<li id="instagram"><a href="https://www.instagram.com" target="_blank">INSTAGRAM</a></li>
<li id="email"><a href="mailto:email@email.com">EMAIL</a></li>
</ul>
</li>
</ul>
</div>
</footer>
</div>
默认情况下,#info
元素将扩展为适合其容器的大小,因为它是一个块级元素。为了防止将其悬停在文本的边缘,您需要将#info
设置为display: inline-block
。
这会缩小元素的宽度,并使弹出窗口向右移。为了解决这个问题,您需要在margin-left
的{{1}}上设置#info > ul
。 calc(-50% + 18.67px)
是继承的左对齐,而-50%
是文本18.67px
的默认宽度。如果您在INFO
上设置了width
,则#info
中的值应更新为匹配值。
这可以在下面看到:
calc()
$(document).ready(function() {
$("#email").hover(function() {
$("#email").css("background-color", "black");
$("#email").css("color", "white");
}, function() {
$("#email").css("background-color", "white");
$("#email").css("color", "black");
});
$("#twitter").hover(function() {
$("#twitter").css("background-color", "black");
$("#twitter").css("color", "white");
}, function() {
$("#twitter").css("background-color", "white");
$("#twitter").css("color", "black");
});
$("#instagram").hover(function() {
$("#instagram").css("background-color", "black");
$("#instagram").css("color", "white");
}, function() {
$("#instagram").css("background-color", "white");
$("#instagram").css("color", "black");
});
});
#background {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
#footer {
position: fixed;
bottom: 0;
width: 25%;
text-align: center;
margin-bottom: 1%;
margin-left: -15%;
left: 50%;
margin-left: -12.5%;
}
a {
text-decoration: none;
color: inherit;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
width: 100%;
bottom: 100%;
padding-bottom: 2%;
}
#footer-nav {
width: 100%;
}
#footer-nav ul {
font-family: Arial;
font-size: 100%;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer-nav ul ul {
font-family: Arial;
font-size: 100%;
color: #000000;
list-style-type: none;
font-weight: normal;
display: none;
}
#email {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#instagram {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#twitter {
padding-top: 2%;
padding-bottom: 2%;
border: 1px solid black;
color: #000000;
}
#info {
display: inline-block;
}
#info > ul {
margin-left: calc(-50% + 18.67px);
}