我需要为手风琴换一种颜色;我在一起工作

I need to change a color for an accordion I'm working with

本文关键字：一种 颜色 工作 在一起 手风琴      更新时间：2023-09-26

http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion_links

^^^这是我需要改变的链接。具体来说，当你激活手风琴时，里面有3个链接。我想更改"链接"上"悬停"的颜色，但不知道如何做到。我可以更改按钮背景和链接背景的颜色。

然而，"浅灰色"的悬停效果让我抓狂。提前感谢您的帮助！！！

只需在body之前添加此代码(!important强制元素采用此样式！(

<style>
    a:hover{background-color: green!important;}
</style>

或者，您可以制作自己的样式表，并将其包含在html-before-body标记中的w3样式表之后(使用head标记是一种很好的做法(。。如果在原始样式表之后包含自己的样式表，则不需要!important部分，因为重复的样式表正在被覆盖。

style.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>

如果你感兴趣，你可以阅读这个文档，使用css选择器

获得一些更酷的功能

我建议在示例中的css文件之后加载您自己的css文件：

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="mycssfileurl">

在这方面，你应该能够像一样覆盖它

#Demo1 a:hover {
  background-color:#FF0000;
}
相关文章：