http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion_links
^^^ 这是我需要更改的链接。具体来说，当您激活 Accordion 时，里面有 3 个链接。我想更改“链接”上“悬停”的颜色，但不知道该怎么做。我可以更改按钮背景和链接背景的颜色。
但是，“浅灰色”悬停效果让我抓狂。预先感谢您的帮助!!!
最佳答案
只需在正文之前添加此代码(!important 强制元素采用此样式!)
<style>
a:hover{background-color: green!important;}
</style>
或者您可以制作自己的样式表并将其包含在 body 标记之前的 html 中的 w3 样式表之后(最好使用 head 标签)..如果在原始样式表之后包含自己的样式表，则不需要 !important 部分，因为重复的样式将被覆盖。
样式.css:
a:hover{
background-color: green;
}
HTML 文件:
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion with links:</p>
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
Accordion 1
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">
Accordion 2
</button>
<div id="Demo2" class="w3-accordion-content">
<a class="w3-padding-16" href="#">Link 1</a>
<a class="w3-padding-16" href="#">Link 2</a>
<a class="w3-padding-16" href="#">Link 3</a>
</div>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
如果您有兴趣，可以阅读 this使用 css 选择器的一些更酷的功能的文档
关于javascript - 我需要为正在使用的 Accordion 更改颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40272488/