1

私はTwitterのブートストラップを使用して自分のWebサイトで作業してきましたが、おそらく正しく行われていないことが1つあります。

リンクの1つにマウスを合わせると、メニューにテキストが表示されます。これが私が持っているものです：

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

どんな助けでもありがたいです。

4

2 に答える 2

1

ツールチップを使用して、凝ったものにすることも、タイトル属性だけにすることもできます。

<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-06T22:14:23.487 に答える
0

これはちょっとあなたが尋ねたものです。しかし、あなたの質問は具体的ではなかったので、あなたが本当に望んでいたことではないと思います。

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-06T22:18:16.160 に答える