Question

我尝试在页脚上实现<nav>，这是最终结果fiddle这是完全错误的，整个导航器在它徘徊时移动我没有保留与时刻相关的任何内容。我需要<nav>中的项目保持不变。

Answer 1

您的.footer-nav nav ul li a:hover填充正在执行此操作：

.footer-nav nav ul li a:hover {
   background-color: #111;
    //padding: 5px;
}

请在.footer-nav nav ul li期间向:hover添加填充或删除（见上文）。如果你想在所有项目上填充：

.footer-nav nav ul li a {
     padding: 5px;
}

Answer 2

首先，在你的小提琴中，你在a之后有一个冒号，这使得它在小提琴中不能正常工作。

    .footer-nav nav ul li a:{
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

其次，你需要在a处于常规状态时具有相同的填充宽度，并且当它处于：hover时，否则你将始终获得跳跃。

第三，没有必要将你的“a”设置为阻止。

第四，设置过渡以使事情更顺畅。

 .footer-nav nav ul li a:hover {
  background-color: #111;
  padding: 8px;
  transition: all ease-in .3s;
  -webkit-transition: all ease-in .3s;
  -moz-transition: all ease-in .3s;
  -o-transition: all ease-in .3s;
}

.footer-nav nav ul li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
  transition: all ease-in .3s;
  -webkit-transition: all ease-in .3s;
  -moz-transition: all ease-in .3s;
  -o-transition: all ease-in .3s;
}

Answer 3

试试这个：

footer{
    width: 100%;
    background-color: #222;
    height: 150px;
    margin-top: 50px;
}

.center-footer{
    text-align: center;
}

.footer-nav nav ul li{
    display: inline-block;
    padding: 5px;
    font-size: 18px;
    padding-top: 27px;
    margin-right: 15px;
}

.footer-nav nav ul li a:hover {
    background-color: #111;
    padding: 5px;
}

.footer-nav nav ul li a{
    display: block;
    padding: 5px;
    background-color: #dddddd;
}

CSS中的页脚导航在悬停时移动

3 个答案: