Question

＆＃13;

body {
  text-align: center;
  background-color: #f5f5ef;
  color: #333;
  font-size: 18px;
  background: url(bgimage.jpeg);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*background-color: #333;*/
}

li {
  float: center;
}

li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li:hover {
  background-color: #111;
}

li a:hover {
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>
    Test Website 1
  </title>
  <meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
  <ul style="color:white">
    <li id="currency"><a href="CurrencyConverter/currency_converter.html">Currency Converter</a></li>
    <li id="feature2"><a href="Feature2/feature2.html">Feature2</a></li>
    <li id="about"><a href="About/about.html">About</a></li>
    <li id="contact"><a href="Contact/contact.html">Contact</li>
    	</ul>
    </body>
    </html>

＆＃13;

这很难解释，但我希望文字改变颜色，即使鼠标悬停在＆＃39; li＆＃39;的水平空间上也是如此。标记，而不仅仅是悬停在文本上方。我不知道该怎么做。请帮忙。

Answer 1

更改此

li a:hover{
 color: white;
}

到此

li:hover a{
 color: white;
}

Fiddle

如何在悬停时更改列表元素中文本的颜色？

1 个答案: