메뉴에서 마우스 오버시 텍스트 표시

Question

나는 트위터 부트 스트랩을 사용하여 내 웹 사이트에서 작업을 해왔으며 그 중 한 가지가 옳지 않을 수도 있습니다.

링크 중 하나를 마우스로 가리키면 메뉴에 텍스트가 나타나길 원합니다. 여기에 내가 가진 무엇 :

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

.

Answer 1

이 당신은 질문 좀 것입니다. 그러나 당신의 질문이 구체적이지 않기 때문에 그것이 당신이 원한 것이라고 생각하지 않습니다.

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

는 "다음"까지 보이고있다.

Answer 2

당신은 공상 아니면 그냥 제목 속성으로 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> 

결과