gpt4 book ai didi

javascript - 我需要为正在使用的 Accordion 更改颜色

转载 作者:行者123 更新时间:2023-11-28 17:25:39 24 4
gpt4 key购买 nike

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com