在菜單上懸停顯示文字

我一直在使用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

在菜單上懸停顯示文字

回答

相關問題