Question

我是html和css的新手。

我正在尝试将悬停效果添加到页面底部的小导航栏中。文本周围有一个边框，里面有文字，我希望悬停效果反转设计，使边框的颜色成为按钮的背景，文本是页面背景颜色。

因为这些是我的其他页面的链接，我必须将css添加到“li a”，但现在我的悬停效果不会影响文本，直到你将鼠标悬停在它上面。

这就是我所拥有的：

nav{

     position: fixed;
     bottom: 0%;
     left: 0%;
     right: 00%;
     display: block; 
     text-align: center;
}

ul{
    padding: 0px;
    display: inline-block;
}

 li {
     font-family: Open Sans, sans-serif;
     font-size: 10px;
     font-weight: 100;
     line-height: 25px;
     text-align: center;
     width: 100px;
     border: solid #383838;
     border-width: 1px;
     color: #383838;
     list-style-type: none;
     float: left;
     margin: 5px;
 }

li a{
     color: #7f7f7f;
     text-decoration: none;
 }

li:hover{
    background: #7f7f7f;
    color: #000000;
}
li a:hover{
    background: #7f7f7f;
    color: #000000;

 <body>
    <nav>
        <ul>
            <li><a href="#">BLACK &amp; GOLD</a></li>
            <li><a href="#">BLACK &amp; WHITE</a></li>
            <li><a href="#">WHITE &amp; GOLD</a></li>
            <li><a href="#">WHITE &amp; BLACK</a></li>
        </ul>
    </nav>
</body>

任何人都可以让我知道我需要做些什么来解决这个问题。

由于添

Answer 1

将悬停选择器从<li>更改为nav { position: fixed; bottom: 0%; left: 0%; right: 00%; display: block; text-align: center; } ul { padding: 0px; display: inline-block; } li { font-family: Open Sans, sans-serif; font-size: 10px; font-weight: 100; line-height: 25px; text-align: center; width: 100px; border: solid #383838; border-width: 1px; color: #383838; list-style-type: none; float: left; margin: 5px; } li a { color: #7f7f7f; text-decoration: none; } li:hover { background: #7f7f7f; color: #000000; } li:hover a { background: #7f7f7f; color: #000000; }。这样，由于CSS的级联性质，如果链接的父列表项被悬停，则链接的样式将有所不同。

＆＃13;

<body>
    <nav>
        <ul>
            <li><a href="#">BLACK &amp; GOLD</a></li>
            <li><a href="#">BLACK &amp; WHITE</a></li>
            <li><a href="#">WHITE &amp; GOLD</a></li>
            <li><a href="#">WHITE &amp; BLACK</a></li>
        </ul>
    </nav>
</body>

＆＃13;

import org.scalatest.{FunSuite, Matchers}

import org.scalatest.prop.TableDrivenPropertyChecks._
import org.scalatest.prop.Tables.Table

class ExpressionValidatorTest extends FunSuite with Matchers {

  object ExpressionValidator {
    import scala.annotation.tailrec

    private val matchingBrackets = Map('(' -> ')', '{' -> '}', '[' -> ']')
    private val openBrackets = matchingBrackets.keySet

    def validate(input: String): Boolean = {

      @tailrec
      def isValid(input: List[Char], stack: List[Char] = Nil): Boolean = (input, stack) match {
        case (nextBracket +: tail, _) if openBrackets.contains(nextBracket) => isValid(tail, nextBracket +: stack)
        case (nextBracket +: tail, lastBracket +: stackTail) if matchingBrackets(lastBracket) == nextBracket => isValid(tail, stackTail)
        case (Nil, _) => stack.isEmpty
        case _ => false
      }

      input.length % 2 == 0 && isValid(input.toCharArray.toList)
    }
  }

  test("validate") {
    val inputs = Table(
      ("expression", "expectedResult"),
      ("()", true),
      ("({})", true),
      ("({[]})", true),
      ("({[()]})", true),
      ("({[()]}())", true),
      ("()()()", true),
      ("(", false),
      (")", false),
      ("({)}", false),
      ("({)", false),
      ("(]", false),
      ("({[(])})", false)
    )

    forAll(inputs) { case (input, expected) => ExpressionValidator.validate(input) shouldBe expected }
  }

}

＆＃13;

试图让悬停效果影响a＆amp;一个ul

1 个答案: