使网页识别悬停继续到下一页

Make web page recognize hover continuation to next page?

本文关键字：一页 继续 悬停 网页 识别      更新时间：2023-09-26

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

演示

（使用作业页面和梦想汽车页面）：演示

对额外的子文件夹表示歉意，我很着急，没有时间打扰网页设计的空间，因为 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;
}

如果我了解你想要什么，最简单的方法是创建一个 .active 类：

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

然后对于li标签，您只需在其上设置class="active"。然后，这将给它灰色背景。

但是，您需要调整 #navlist sub li 元素，以便在它们悬停在另一个元素上时删除 .active 类（否则它将保持灰色）

像这样：

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

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

基本上，当您在该活动页面上时，您会在 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;
}
相关文章：