Question

所以我试图这样做，以便当访问者点击导航标签并且滑块移动时，滑块应该保持在相同的位置，因为鼠标仍然在上一页上。悬停时的相同位置，我的意思是它一直向左移动。

演示（使用“分配”页面和“梦幻汽车”页面）：Demo

为其他子文件夹道歉，我很匆忙，没有时间去处理网页设计中的空间，因为centos不会选择它...

如果它有帮助，可以使用JSFiddle：http://jsfiddle.net/EdLVx/（不过它会怀疑）。

HTML：

<div id="navbar">
<div id="navlinks">
<nav>
<ul id="navlist">
<li><a href="index.html">HOME</a></li>
<li><a href="assignments.html">ASSIGNMENTS</a></li>
<li><a href="cars.html">DREAM CARS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</div>

CSS：

#navbar{
width:100%;
height:50px;
display:table;
margin:auto;
}
#navlinks ul {
display:table;
border-collapse:collapse;
width:100%;
margin:0 0 20px;
padding:0;
list-style:none;
}
#navlinks li {
display: table-cell;
vertical-align: middle;
text-align:center;
width:25%;
background: linear-gradient(to right, #111 50%, #444 50%);
background-size: 200% 100%;
background-position:left top;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease;
-moz-transition-delay:all 1s ease;
-ms-transition-delay:all 1s ease;
-o-transition-delay:all 1s ease;
}
#navlinks li:hover{
background-position:right top;
}
#navlinks a {
text-decoration:none;
color: #999;
text-transform: uppercase;
display:block;
padding-top:10px;
padding-bottom:10px;
font: bold 12px/25px Arial, Helvetica;
transition:all 1s ease;
-webkit-transition-delay:all 1s ease-in-out;
-moz-transition-delay:all 1s ease-in-out;
-ms-transition-delay:all 1s ease-in-out;
-o-transition-delay:all 1s ease-in-out;
}

#navlinks a:hover{
color:black;
}
#navlinks a:active{
color: #999;
}

Answer 1

最简单的方法，如果我理解你想要的东西 - 就是建立一个 .active 类：

#navlinks li.active{
  background: #444;
}

然后，对于li标记，您只需在其上设置class="active"即可。然后这会给你灰色背景。

但是，您需要调整 #navlist 子 li 元素，以便在将鼠标悬停在其他元素上时删除 .active 类（否则它将保持灰色）

这样的事情：

$(document).ready( function() {
    $('ul#navlist li a').hover( function() { 
        $('ul#navlist li').each( function() { 
            $(this).removeClass("active");
        });
    } );
} );

演示：http://jsfiddle.net/EdLVx/4/

Answer 2

当您在该活动页面上时，基本上您在a标签上添加了一个活动类。您取消了活动导航项的转换。

http://fiddle.jshell.net/tauA3/9/show/
http://fiddle.jshell.net/tauA3/9/

#navlinks a.active{
    -moz-transition: none;
    -ms-transition: none;
    -webkit-transition: none;
    -o-transition: all 0 ease-in;
    transition: none;
    background:#444;
    color:black;
}

使网页识别悬停延续到下一页？

2 个答案: