我对CSS有问题。我把所有的都放在中心,它工作正常,但有一个问题与悬停css。当我设置active class或hover li元素时,背景颜色被设置为100%。此外,parapraph从左侧开始,并不完全在元素之下。我试着检查代码,但没有看到任何东西。
原因是什么?以后如何避免类似的事情发生??
我想得到这样的东西:
我试着预览代码和改变宽度和其他类
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
:root {
--main-color: #009add;
}
* {
box-sizing: border-box;
font-family: 'Century Gothic';
}
h2 {
text-align: center;
text-transform: uppercase;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
#myInput {
background-image: url('https://cdn.iconscout.com/icon/free/png-512/free-search-1779499-1513194.png');
background-size: contain;
background-position: 0;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
outline: none;
border-style: none;
margin-bottom: 12px;
border-radius: 20px;
box-shadow: 0 0 5px var(--main-color);
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
border-radius: 20px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
border-radius: 20px;
display: block;
width: 90%;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
.accordion {
/* background-color: #eee; */
color: #444;
cursor: pointer;
padding: 5px;
margin: 5px;
/* width: 100%; */
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.active,
.accordion:hover {
background-color: var(--main-color);
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
color: var(--main-color);
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Najczęściej zadawanie pytania:</h2>
<div class="container">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Wyszukaj.." title="Wyszukaj">
</div>
<ul id="myUL">
<li class="accordion"><a href="#">TYTUŁ</a></li>
</id>
<div class="panel">
<p>Rozwiązanie</p>
</div>
<li class="accordion"><a href="#">TYTUŁ2</a></li>
<div class="panel">
<p>Rozwiązanie</p>
</div>
</ul>
</div>
</body>
</html>
2条答案
按热度按时间qni6mghb1#
我设法修复了你的一些代码。问题是,活动色调来自背景,而不是边界,这是CSS中常见的事情。
不是这个星球上最干净的代码,有很多需要简化的地方,但是嘿,我想你可能会喜欢它!
fhg3lkii2#
你可以改变你。面板类这样