Question

首先让我说我开始意识到我需要学习jQuery，虽然我在这里寻求帮助，但本周末我将很难打到Treehouse jQuery视频。 / p>

如果你看一下我制作的小提琴，我想尝试使用导航菜单创建效果的一点帮助： http://jsfiddle.net/number8pie/kvMkF/4/

正如您所看到的那样，导航链接列表及其上方是与该链接对应的文本。我喜欢的是，除了屏幕阅读器之外，任何人都不能查看该文本，并且当用户将鼠标悬停在最左侧列表项后面的相应文本幻灯片链接到可见性时，文字说＆＃34; NAVIGATE＆＃34;消失。我希望所有的文字都能从最初的位置滑到同一个地方，在那里，＃NAVIGATE＆＃34;文字是。

我对解决方案持开放态度，只有CSS（不要认为只用CSS），jQuery或JavaScript。

提前感谢您的帮助，我会尽快开始学习jQuery。

以下是代码：

HTML：

<nav class="main-nav">
    <p class="nav-hvr-init">Navigate</p>
    <ul> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
        <li id="about-us">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">about us</span>
        <li id="products">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">products</span>
        <li id="the-team">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">the team</span>
        <li id="environment">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">environment</span>
        <li id="contact">
            <a class="nav-link" href="#"></a>
            <span class="nav-text">contact</span>
    </ul>
</nav>

CSS：

#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;
}

Answer 1

快捷方便。

jQuery的：

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

还将display: none;添加到.nav-text

jsFiddle

Answer 2

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

我还添加了sr-only类（来自Bootstrap）。

http://jsfiddle.net/kvMkF/8/

$( ".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);
            });
  }
);

Answer 3

$(".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%'});
});

here is a fiddle

从导航后面滑出文本

3 个答案: