【问题标题】:Li hover bootstrap李悬停引导
【发布时间】:2014-10-15 11:19:03
【问题描述】:

我尝试将下拉菜单的悬停颜色设为蓝色,但没有任何效果。我尝试了不同的代码但没有成功。希望有人可以提供帮助。我的代码如下。当鼠标悬停时,我希望下拉选项卡是蓝色的。

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-inner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Pudding</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="./">Home</a></li>
        <li><a href="./forums.php">Forums</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
            <a href="" class="dropdown-toggle" data-toggle="dropdown"> <?php if ($user->is_logged_in()) {echo "Welcome";} if (!$user->is_logged_in()) {echo "Please log in";} ?> <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="dropdown-header"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="/?1" name="link1">
              <?php 
                  if($user->is_logged_in()){echo "Log out";}
                  if(!$user->is_logged_in()) {echo "Log in";}
              ?>
              </a></li>
        </ul>
       </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>
</div>`

【问题讨论】:

  • #elementid li a:hover{} 应该可以解决问题

标签: html css twitter-bootstrap hover html-lists


【解决方案1】:

这对我有用...

首先给出你的第一个父 div:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

一个 ID 说 #my_blue_nav 然后添加这个 CSS。

#my_blue_nav li > a:hover{
    background-color: blue;
}

#my_blue_nav li.active a{
    background-color: blue !important;
}

还要确保在 bootstrap.css 之后加载 custom.css

【讨论】:

  • meadowlandmc.com 这是我的网站。我已经粘贴了您的代码,但它不起作用。
  • @MeesMaas 如果您完全复制了该 CSS,它将无法正常工作,因为您在 HTML 中添加了“my_blue_nav”作为类而不是 ID。所以要么将您的 HTML 更改为 id="my_blue_nav" 或在您的 CSS 中将所有 #my_blue_nav 更改为 .my_blue_nav 让我知道这是否有效
  • 这是我的 css .warning { color: RED } my_blue_nav li > a:hover{ background-color: blue; } my_blue_nav li.active a{ 背景颜色:蓝色!重要; } dropdown li a:hover{ color: #013adf } 还有我的 HTML:
  • @MeesMaas 你是复制粘贴的吗??您仍然缺少 .在 my_blue_nav 上,它应该是“.my_blue_nav”,你甚至不知道立场类和 ID 吗?如果你对 CSS 没有基本的了解,你不应该问这些问题。不要再问了,直到你在 YouTube 上查找 LevelUp Tuts CSS。它非常容易上手,只需几个小时。
猜你喜欢
  • 2013-12-23
  • 2015-10-18
  • 2013-06-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-27
  • 2015-08-05
  • 1970-01-01
相关资源
最近更新 更多