导航栏列表项目使用悬停向右移动
[英]Nav Bar List Items Move Right With Hover
问题描述
我有一个导航栏，其中所有列表元素的填充为25像素。 悬停时，背景颜色会在列表元素上发生变化，并添加5px的填充。 但是，原始填充在悬停时会增加5px，因此填充会在悬停时合并为30px。
这会改变li元素，因为它们会超过这5个px。 我希望li元素在悬停时保持静态，但在悬停时仍然会扩展填充。
我已经尝试过改变位置：绝对但没有帮助。 任何关于在添加'悬停填充'时删除额外填充的建议将不胜感激。
JS小提琴： http ： //jsfiddle.net/j77mqm6q/
实时演示HTML和CSS：
body { width: 100%; font-family: Geneva, sans-serif; font-size: 1em; background-image: url("subtle_white_feathers.png"); text-align: justify; } /* NAVIGATION */ nav { font-size: 1.3em; } nav ul { list-style: none; padding-left: 0px; } nav ul li { display: inline; padding: 25px; position: relative; } nav ul li a { text-decoration: none; } nav ul li a:visited { color: #669966; } nav ul li a:hover { background-color: #669966; color: #ffffff; -webkit-transition: .25s linear; -moz-transition: .25s linear; transition: .25s linear; padding: 5px; } nav ul li a:active { background-color: #000000; padding: 10px; color: #ffffff; } /* DROPDOWN MENUS (ul > li > ul > li) */ ul li ul { position: absolute; left: 0; visibility: hidden; text-align: initial; font-color: #81B981; } ul li ul li { background: #444444; display: block; padding: 15px; width: 150px; border-bottom: 1px solid #ffffff; margin-left: 25px; width: 50; font-color: #FFFFFF; } ul li ul li:first-child { margin-top: 10px; } ul li ul li:last-child { border: none; } ul li ul li:hover { background: #6A6B6D; } ul li ul li a:hover { background-color: #6A6B6D; } ul li:hover ul { display: block; visibility: visible; }
<body> <nav> <ul> <li><a href="">About</a> <ul> <li><a href="">History</a></li> <li><a href="">What You Need to Know</a></li> </ul> </li> <li><a href="">Getting Started</a> <ul> <li><a href="">Tools</a></li> <li><a href="">Background</a></li> </ul> </li> <li><a href="">Build</a> <ul> <li><a href="">WP Theme Anatomy</a></li> <li><a href="">Putting it Together</a></li> <li><a href="">Files</a></li> <li><a href="">Sharing Your Theme</a></li> </ul> </li> <li><a href="">Resources</a> <ul> <li><a href="">Guides</a></li> <li><a href="">Videos</a></li> </ul> </ul> </li> </nav> </div> </body>
问题在哪里
nav ul li {
display: inline;
padding: 25px;
position: relative;
}
nav ul li a:hover {
background-color: #669966;
color: #ffffff;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
transition: .25s linear;
padding: 5px;
}
1 个解决方案
解决方案1
0 2015-08-17 01:31:56
下面是一个使用::before伪选择器和绝对定位来实现您正在寻找的效果而不会移动元素位置的示例：
现场演示：
body { width: 100%; font-family: Geneva, sans-serif; font-size: 1em; background-image: url("subtle_white_feathers.png"); text-align: justify; } /* NAVIGATION */ nav { font-size: 1.3em; } nav ul { list-style: none; padding-left: 0px; } nav ul li { display: inline; padding: 25px; position: relative; } nav ul li a { text-decoration: none; position: relative; } nav ul li a:visited { color: #669966; } nav ul li a:hover { color: #ffffff; } nav ul li a:hover::before { background-color: #669966; top: -5px; left: -5px; bottom: -5px; right: -5px; } nav ul li a:active { background-color: #000000; padding: 10px; color: #ffffff; } nav ul li a::before { position: absolute; z-index: -1; content: ""; display: block; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; -webkit-transition: .25s linear; -moz-transition: .25s linear; transition: .25s linear; } /* DROPDOWN MENUS (ul > li > ul > li) */ ul li ul { position: absolute; left: 0; visibility: hidden; text-align: initial; font-color: #81B981; } ul li ul li { background: #444444; display: block; padding: 15px; width: 150px; border-bottom: 1px solid #ffffff; margin-left: 25px; width: 50; font-color: #FFFFFF; } ul li ul li:first-child { margin-top: 10px; } ul li ul li:last-child { border: none; } ul li ul li:hover { background: #6A6B6D; } ul li ul li a:hover { background-color: #6A6B6D; } ul li:hover ul { display: block; visibility: visible; }
<nav> <ul> <li><a href="">About</a> <ul> <li><a href="">History</a></li> <li><a href="">What You Need to Know</a></li> </ul> </li> <li><a href="">Getting Started</a> <ul> <li><a href="">Tools</a></li> <li><a href="">Background</a></li> </ul> </li> <li><a href="">Build</a> <ul> <li><a href="">WP Theme Anatomy</a></li> <li><a href="">Putting it Together</a></li> <li><a href="">Files</a></li> <li><a href="">Sharing Your Theme</a></li> </ul> </li> <li><a href="">Resources</a> <ul> <li><a href="">Guides</a></li> <li><a href="">Videos</a></li> </ul> </ul> </nav>
JSFiddle版本： http ： //jsfiddle.net/j77mqm6q/1/
当我将鼠标悬停在导航栏上时，导航栏上的列表项会向前移动
[英]List items on Navigation bar move forward when I hover the mouse on it
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.