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

标签 html css

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;
}

<!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>

这很难解释，但我希望即使鼠标悬停在“li”标签的水平空间上时文本也会改变颜色，而不仅仅是悬停在文本上时。我不知所措。请帮忙。

最佳答案

改变这个