我正在写一个网站，想制作一列像按钮一样的链接(是一个 block 状，当你将鼠标悬停在上面并单击它时它会改变颜色，等等)。我的代码目前看起来像这样:
function search() {
var input, filter, ul, li, a, i;
input = document.getElementById("input");
filter = input.value.toUpperCase();
div = document.getElementById("dropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}html {
font-family: "Titillium Web", sans-serif;
font-weight: 400;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
text-rendering: optimizeLegibility;
}
#title {
background-color: brown;
margin-left: 8%;
margin-right: 10%;
width: 85%;
}
h1 {
font-weight: 200;
font-size: 800%;
padding-top: 2%;
color: white;
}
h2 {
font-weight: 100;
font-size: 200%;
color: white
}
.dropdown {
width: 34%;
margin-left: 32%;
background-color: cornflowerblue;
}
.dropdown a {
text-decoration: none;
font-size: 26px;
width: 20%;
color: white;
transition: background-color 0.5s, color 0.5s;
}
.dropdown a:active,
.dropdown a:hover {
background-color: brown;
}
#input {
width: 98%;
height: 40px;
font-size: 25px;
background-color: black;
color: white;
}<body>
<script src="script.js"></script>
<h1 id="title">My stuff</h1>
<h2>To be directed to the correct thing, click on the corresponding item on the menu.</h2>
<div id="dropdown" class="dropdown">
<input type="text" placeholder="Search for a project" id="input" onkeyup="search()">
<a href="projects/something.html">Blank</a><br>
<a href="">Another Blank</a><br>
<a href="">Even More Blanks</a><br>
<a href="">Final Blank</a><br>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>我希望，当您将鼠标悬停在该列的不同链接上时，整行都会改变颜色。另外，我希望整行成为链接的一部分(即，您可以单击该行的任意位置，它将带您到链接链接到的任何位置。)。提前致谢!!
最佳答案
你的代码结构不是很好，需要改一下。尝试在 dropdown 中使用 ul。当然这个例子不是最好的，但它可以达到你想要的效果。
html {
font-family: "Titillium Web", sans-serif;
font-weight: 400;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
text-rendering: optimizeLegibility;
}
#title {
background-color: brown;
margin-left: 8%;
margin-right: 10%;
width: 85%;
}
h1 {
font-weight: 200;
font-size: 800%;
padding-top: 2%;
color: white;
}
h2 {
font-weight: 100;
font-size: 200%;
color: white
}
.dropdown {
width: 34%;
margin-left: 32%;
background-color: cornflowerblue;
}
.dropdown ul{
list-style:none;
padding:0;
margin:0;
}
.dropdown a {
text-decoration: none;
font-size: 26px;
display:block;
color: white;
transition: background-color 0.5s, color 0.5s;
}
.dropdown a:active,
.dropdown a:hover {
background-color: brown;
}
#input {
width: 98%;
height: 40px;
font-size: 25px;
background-color: black;
color: white;
}<body>
<script src="script.js"></script>
<h1 id="title">My stuff</h1>
<h2>To be directed to the correct thing, click on the corresponding item on the menu.</h2>
<div id="dropdown" class="dropdown">
<input type="text" placeholder="Search for a project" id="input" onkeyup="search()">
<ul>
<li>
<a href="projects/something.html">Blank</a><br>
</li>
<li>
<a href="">Another Blank</a><br>
</li>
<li>
<a href="">Even More Blanks</a><br>
</li>
<li>
<a href="">Final Blank</a><br>
</li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>关于html - 如何使具有不同文本大小的列中的所有链接与 HTML 和 CSS 中的行大小相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59092889/