Javascript 从导航后面滑出文本

首先让我说，我开始意识到我需要学习jQuery，当我在这里寻求帮助时，这个周末我将努力学习树屋jQuery视频

如果你看一下我做的小提琴，我想用导航菜单给你一点帮助：

如您所见，有一个导航链接列表，上面是与链接对应的文本。我希望的是，除了屏幕阅读器之外，任何人最初都无法查看该文本，当用户鼠标悬停在链接上时，相应的文本从最左边的列表项后面滑动到可见性中，显示“导航”的文本消失。我希望所有文本都从最初的位置滑动到“导航”文本所在的相同位置

我对只使用CSS（不要认为只使用CSS）、jQuery或JavaScript的解决方案持开放态度

提前感谢您的帮助，我将确保尽快开始学习jQuery

代码如下：

HTML:

快速简便

jQuery：

$( ".nav-link" ).hover(
  function() {
    var ntext = $( this ).siblings( "span" ).html();
    $( ".nav-hvr-init" ).html( ntext );
  }, function() {
    $( ".nav-hvr-init" ).html( "Navigate" );
  }
);

还添加了

显示：无至
.nav text

那怎么样？这是你想要的吗

我还添加了
sronly
类（来自引导）


太棒了，这就是我想要的。你能不能让文本从右边滑出来，看起来像是从图标后面滑出来的，里面有一个i？
#nav-row {
  background-color: #CCFFCC;
}

#nav-col {
  height: 56px;
  padding-top: 0;
  background-color: #336600;
}

.main-nav {
  height: 56px;
  margin: 0 auto;
  background-color: #336600;
  position: relative;
}

.main-nav ul li {
  height: 56px;
  width: 56px;
  margin: 0;
  font-size: 21px;
  display: inline-block;
  text-transform: uppercase;
}

#about-us {
  background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center;
}

#about-us:hover {
  background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#about-us:active {
  background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#products {
  background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center;
}

#products:hover {
  background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#products:active {
  background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#the-team {
  background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center;
}

#the-team:hover {
  background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#the-team:active {
  background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#environment {
  background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center;
}

#environment:hover {
  background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#environment:active {
  background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#contact {
  background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center;
}

#contact:hover {
  background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

#contact:active {
  background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

.main-nav > ul {
  height: 56px;
  line-height: 100%;
  margin: 0;
  position: relative;
  float:right;
  padding: 0;
}

li > svg {
  margin: 9% 0 0 11%;
}

li > a {
  display: block;
  padding: 0;
  margin: 0;
}

.nav-link {
  margin: 0;
  height: 56px;
}

.nav-text {
  color: #FFFFFF;
  font-family: 'Arial Black';
  font-size: 21px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.nav-hvr-init {
  color: #FFFFFF;
  font-family: 'Arial Black';
  font-size: 21px;
  text-transform: uppercase;
  line-height: 100%;
  margin-right: 4px;
  margin-bottom: 0;
  position: absolute;
  right: 280px;
  bottom: 0px;
  opacity: 0.2;
}

.txt-arrows {
  font-family: 'Arrows';
  font-size: 18px;
  text-transform: none;
  margin-bottom: 3px;
  margin-left: 4px;
}

$(".main-nav li").hover(function(){
  $(".nav-hvr-init").fadeOut();
    $(this).find('.nav-text').show().animate({left : '150px'});
  }, function(){
  $(".nav-hvr-init").fadeIn();
    $(this).find('.nav-text').animate({left : '-100%'});
});

$( ".nav-link" ).hover(
  function() {
    var ntext = $( this ).siblings( "span" ).html();
    $( ".nav-hvr-init" ).html( ntext );
  }, function() {
    $( ".nav-hvr-init" ).html( "Navigate" );
  }
);

$( ".nav-link" ).hover(
    function() {
    var text = $( this ).siblings( "span" ).html();   
          $(".nav-hvr-init")
          .stop()
          .animate({right: '0px'},200,function() {
              $(this).html(text).animate({right:'280px'},200);
          });
  }, function() {
      $(".nav-hvr-init")
            .stop()
            .animate({right: '0px'},200,function() {
                $(this).html('Navigate').animate({right:'280px'},200);
            });
  }
);