CSS -悬停时100%的宽度，尽管将元素设置为不同的宽度

yhuiod9q  于 2023-07-01  发布在  其他
关注(0)|答案(2)|浏览(128)

我对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>
css

2条答案

按热度按时间
qni6mghb

qni6mghb1#

我设法修复了你的一些代码。问题是，活动色调来自背景，而不是边界，这是CSS中常见的事情。
不是这个星球上最干净的代码，有很多需要简化的地方，但是嘿，我想你可能会喜欢它！

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :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 {
            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;
        }
        
        #myUL li:hover {
            border: 1px solid var(--main-color);
        }

        .accordion {
            /* background-color: #eee; */
            color: #444;
            cursor: pointer;
            padding: 5px;
            margin: 5px;
            /* width: 100%; */
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #myUL .active {
            border: 1px solid var(--main-color);
        }

        .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            color: var(--main-color);
            overflow: hidden;
        }
    </style>
</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>
    <script>
        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";
                }
            });
        }
    </script>

</body>

</html>
赞(0）分享  回复(0）举报  2023-07-01
fhg3lkii

fhg3lkii2#

你可以改变你。面板类这样

.panel {
   padding: 0 18px;
   margin: 0 auto;
   width: 90%;
   display: none;
   background-color: white;
   color: var(--main-color);
   overflow: hidden;
}
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;
  margin: 0 auto;
  width: 90%;
  display: none;
  background-color: white;
  color: var(--main-color);
  overflow: hidden;
}
<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>
    <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>
</body>

</html>
赞(0）分享  回复(0）举报  2023-07-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com