Question

我不是网络级别的人，所以如果这是一个愚蠢的问题我会道歉。

我试图在悬停时添加下划线boostrap下拉菜单项，并收到错误消息，指示我的属性值无效。我已经经历了一系列的旋转，但是当前的代码看起来像这样。

HTML：

android:dividerHeight="-10.0dp"

在css文件中：

<li class="dropdown"><a href="#" class="dropdown-toggle header-link"
                    data-toggle="dropdown">Clubs <span class="caret"></span></a>

非常感谢任何帮助。

我认为显示所有HTML可能会有所帮助，所以......

HTML：

a.header-link {

    a.hover {
      text-decoration:underline;
    }
}

CSS：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rugby Clubs</title>

<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Logo -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">RUGBY</a>
            </div>

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle header-link"
                    data-toggle="dropdown">Clubs <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Womens Rugby</a></li>
                        <li><a href="#">Mens Rugby</a></li>
                        <li><a href="#">High School Girls Rugby</a></li>
                        <li><a href="#">High School Boys Rugby</a></li>
                    </ul></li>
                <li><a href="#">Events</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Sign In</a></li>
              <li><a href="#">Join</a></li>
            </ul>
            </div>
        </div>
    </nav>
</body>
</html>

感谢。

Answer 1

我假设通过嵌套你使用LESS或SCSS。那样做：

a.header-link {

    &:hover {
       text-decoration:underline;
    }
}

你编写的内容会编译，因为.header-link中包含一个类“hover”的锚标记子。你在HTML中没有这个。你有一个图标;）

如果您不使用LESS或SCSS，请不要嵌套。这只是你在我提到的处理器中可以做的事情。这样做：

 a.header-link {  something }

 a.header-link:hover {
    text-decoration:underline !important;
 }

Answer 2

试试这个：

.header-link{
  text-decoration:none;
}
.header-link:hover{
  text-decoration:underline;
}

Answer 3

应该是这样的：

a.header-link:hover {
  text-decoration:underline;
}

覆盖列表项<li>上的引导样式不符合预期

3 个答案:

试试这个：