0
這裏的東西，我想移動帶班「效果」的DIV（）時，每個選項卡上懸停，換句話說：我只是想要一個滑動下劃線菜單如何解決導航與焦點和懸停？
在我第一次嘗試我嘗試移動它與「：懸停」的CSS僞類，但它的工作方向只是一個方向，這一次（檢查片段）我試着用jQuery，但我不知道我在做什麼錯，它不工作......我想要保持：焦點僞類，而且當懸停時，下劃線滑動運動，我正在尋找更好的交叉瀏覽和SEO解決方案，因爲我聽說用JavaScript導航有麻煩與搜索引擎優化。
感謝您的寶貴意見！
$(document).ready(function(){
$('.two').focus(function(){
$('.three').hover(function(){
$('.ph-line-nav .effect').addClass('moveright');
}, function(){
$('.ph-line-nav .effect').removeClass('moveright');
});
});
});body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.width {
width: 700px;
margin: 0 auto;
}
nav {
margin-top:20px;
font-size: 110%;
display: table;
background: #FFF;
overflow: hidden;
position: relative;
width: 100%;
}
nav a {
text-align:center;
background: #FFF;
display: block;
float: left;
padding: 2% 0;
width: 25%;
text-decoration: none;
transition: .4s;
color: #333;
/*border-right: 1px solid red;
border-left: 1px solid red;*/
}
/* ========================
Lava-lamp-line:
======================== */
.effect {
position: absolute;
left: 0;
transition: .3s ease-in-out;
}
nav a:nth-child(1):focus ~ .effect {
left: 0%;
/* the middle of the first <a> */
}
nav a:nth-child(2):focus ~ .effect {
left: 25%;
/* the middle of the second <a> */
}
nav a:nth-child(3):focus ~ .effect {
left: 50%;
/* the middle of the third <a> */
}
nav a:nth-child(4):focus ~ .effect {
left: 75%;
/* the middle of the forth <a> */
}
.moveright {
left: 50%;
}
.ph-line-nav .effect {
width: /*55px*/ 25%;
height: .25rem;
bottom: 5px;
background: /*#00ABE8*/tomato;
margin-left:/*-45px*/auto;
margin-right:/*-45px*/auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width">
<nav class="ph-line-nav">
<a href="#" class="one">News</a>
<a href="#" class="two">Activities</a>
<a href="#" class="three">Search</a>
<a href="#" class="four">Time</a>
<div class="effect"></div>
</nav>
</div>
請再次檢查，我修改 –
的片段是以上..檢查 –
實際片段的作品只是作爲一個「焦點」的效果，而不是作爲一個懸停效果，我想在我懸停時移動下劃線，而不僅僅是當我點擊每個標籤時。 –