Question

这就是事情，我希望当每个标签悬停时，用类“效果”（）移动div，换句话说：我只想要一个滑动下划线菜单

在我的第一次尝试中，我尝试使用“：hover”css伪类移动它，但它只能用于一个方向，这次（检查片段）我尝试用jquery，但我不知道我是什么做错了它不起作用...我想保持：焦点伪类，但也是悬停下划线滑动，我正在寻找更好的交叉浏览和搜索引擎优化解决方案，因为我听说用javascript导航有SEO的麻烦。

感谢您的知识！

$(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>

Answer 1

更接近你想要得到的东西？

$(document).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>

如何使用焦点和悬停来修复导航？

1 个答案: