在父元素悬停时更改标记子项的颜色

Question

我将鼠标悬停在其父tok :: TokKind a -> Parser a tok tk' = get >>= \ s -> if | (_, Tok tk x) :- xs <- s, Just Refl <- testEquality tk tk' -> put xs *> pure x | (l, t) :- _ <- s -> throwError [(l, "Unexpected " <> description t)] | Nil l <- s -> throwError [(l, "Unexpected end of input")] 上时，尝试将create function hello(x char(10),y char(10)) returns char(30) deterministic return concat(x,' ',y)` select hello('Hello','World'); Hello World 标记的颜色从红色更改为黑色。

a

li

我试过这样：

.header {
  background-color: black;
  height: 30px;
  padding: 15px;
  font-size: 20px;
}

.header_links {
  list-style-type: none;
  margin-top: 0px;
}

.header_links li a {
  color: red;
  text-decoration: none;
}

.header_links li * {
  display: inline-flex;
}

.header_links li {
  display: inline-flex;
  border: 1px solid white;
  color: white;
  background-color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.header_links li:hover {
  cursor: pointer;
  background-color: white;
  color: black;
}

.header_links li i {
  padding-top: 1px;
  padding-right: 4px;
}

但这根本不会影响标签颜色。

我也试图利用重要的东西：

<div class="header">
  <ul class="header_links">
    <li>
      <a href="{{ url('/start') }}">
        <i class="fa fa-compass" aria-hidden="true"></i>
        <div>Menue</div>
      </a>
    </li>
    <li>
      <a href="{{ url('/start') }}">
        <i class="fa fa-compass" aria-hidden="true"></i>
        <div>Test</div>
      </a>
    </li>
  </ul>
</div>

但这也不起作用。

Answer 1

添加新的选择器.header_links li:hover a

＆＃13;

＆＃13;

.header {
  background-color: black;
  height: 30px;
  padding: 15px;
  font-size: 20px;
}

.header_links {
  list-style-type: none;
  margin-top: 0px;
}

.header_links li a {
  color: red;
  text-decoration: none;
}

.header_links li * {
  display: inline-flex;
}

.header_links li {
  display: inline-flex;
  border: 1px solid white;
  color: white;
  background-color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.header_links li:hover {
  cursor: pointer;
  background-color: white;
}

.header_links li:hover a {
  color: black;
}

.header_links li i {
  padding-top: 1px;
  padding-right: 4px;
}

＆＃13;

<div class="header">
  <ul class="header_links">
    <li>
      <a href="{{ url('/start') }}">
        <i class="fa fa-compass" aria-hidden="true"></i>
        <div>Menue</div>
      </a>
    </li>
    <li>
      <a href="{{ url('/start') }}">
        <i class="fa fa-compass" aria-hidden="true"></i>
        <div>Test</div>
      </a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果要更改A标签，则需要定位。 所以改变

.header_links li:hover {
color: black;
} 

到

.header_links li a:hover {
color: black;
}

如果您不想将悬停添加到标签，您也可以这样做

.header_links li:hover a{
   color: black;
}