Question

我已经制作了一个按钮，但对我来说这还不够好，我想让它在鼠标指针悬停在它上面时改变它的属性。我试过了：

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

Answer 1

它很简单：

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

Demo Fiddle

您希望定位按钮（可以直接使用#button或使用上述内容定位所有submit元素），然后在:hover选择器上应用下划线

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

1 个答案:

Demo Fiddle