当鼠标指针悬停在按钮上时，如何使用CSS给按钮文本添加下划线？

Question

当鼠标指针悬停在按钮上时，如何使用CSS给按钮文本添加下划线？

5

我已经制作了一个按钮，但是对于我来说它还不够好，我希望当鼠标指针悬停在上面时，它的属性会发生变化。我尝试过：

a:hover #button {
text-decoration:underline;
}

以及：

a:hover input {
text-decoration:underline;
}

HTML：

<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
 <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
 <script type="text/javascript" src="script.js"></script>
</head>
<body id="body-color">
<h1 id="heading">Welcome to the Intarnet.</h1>
<hr style="color:#E6B636">
<div id="Sign-In">
<center><legend>Please enter your username and password.</legend></center>
<hr style="color:#E6B636">
<form method="POST" action="connectivity.php">
Username: <br><input type="text" name="user" size="40"><br>
Password: <br><input type="password" name="pass" size="40"><br><br>
<input id="button" type="submit" name="submit" value="Log-In">
</form>

</div>
</body>
</html>

-Trey

- user3608589

4

你不能在 <a> 标签内插入 <input> 或 <button> 标签。 - Fabrizio Calderan

虽然将该元素放在a标签内是无效的，但您可以尝试使用a input:hover。但是根据您的代码，在您的HTML中甚至没有a标签。 - putvande

你可以直接使用 input:hover，你需要 a 标签吗？ - serakfalcon

在你的更新之后：如果页面中没有链接，为什么要使用 a:hover？ - Fabrizio Calderan

<center>已被弃用，不应再使用。 - Paulie_D

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SW4 · Accepted Answer

这很简单：

input[type=submit]:hover{
    text-decoration:underline;
}

演示代码

你想要选择你的按钮（你可以直接使用 #button 选择器，或者使用上面提到的方式选择所有的 submit 元素），然后在 :hover 伪类选择器上应用下划线样式。