在菜单上悬停显示文字

我一直在使用twitter bootstrap在我的网站上工作，有一件事情我可能做得不对。在菜单上悬停显示文字

我想在菜单中出现一些文本，而我将鼠标悬停在其中一个链接上。下面是我有：

HTML：

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li><a href="portfolio.html" title="Back to Portfolio">Back</a></li> 
       <li><a href="prev_page.html" class=""previous >Previous</a></li> 
       <li><a href="next_page.html" class="next" >Next</a></li> 
       <li><span class="shownext">View next</span></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!-- /.navbar-inner --> 
     </div><!-- /.navbar navbar-inverse-->

CSS：

.nav .shownext { 
    font-weight: normal; 
    font-style: italic; 
    font-size: 11px; 
    display: none; 
} 

.next:hover + .nav .shownext { 
    display: block; 
}

任何帮助将不胜感激。

来源

2013-03-06 dm82

这是有点什么你问。但既然你的问题不是特定的，我不认为它真的是你想要的。

http://jsfiddle.net/xM6u9/1/

<div class="navbar"> 
    <div class="navbar-inner"> <a class="brand" href="#">Title</a> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a> 
      </li> 
      <li><a href="#">Link</a> 
      </li> 
      <li><a href="#">Link</a> 
      </li> 
      <li class="shownext"><a href="#">Next</a> 
      </li> 
     </ul> 
    </div> 
</div>

CSS：

.shownext { display: none; } 
li:hover + .shownext { display: block; }

“下一步” 被显示出来时，您悬停在最后一个项目。

来源

2013-03-06 22:18:16 vandalizmo

哦哇！这正是我要找的。我想在两个链接（上一个和下一个）中做到这一点，这很好！非常感谢！ – dm82 2013-03-12 21:23:27

您可以使用tooltips被看中或者只是标题属性：

<div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li><a href="portfolio.html" data-toggle="tooltip" data-placement="left" title="first tooltip" title="Back to Portfolio">Back</a></li> 
       <li><a href="prev_page.html" data-toggle="tooltip" data-placement="bottom" title="second tooltip" class=""previous >Previous</a></li> 
       <li><a href="next_page.html" data-toggle="tooltip" data-placement="top" title="third tooltip" class="next" >Next</a></li> 
       <li><span class="shownext" data-toggle="tooltip" data-placement="top" title="view next">View next</span></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!-- /.navbar-inner --> 
     </div><!-- /.navbar navbar-inverse--> 

<script>$('li a').tooltip(options)</script>

结果

来源

2013-03-06 22:14:23 bleuscyther

在菜单上悬停显示文字

回答

相关问题