在HTML中,可以使用CSS来设置鼠标选中状态,以下是一些常用的方法:
(图片来源网络,侵删)
1、使用:hover
伪类选择器
:hover
伪类选择器用于选择鼠标悬停在元素上时的样式,当用户将鼠标悬停在一个按钮上时,可以改变按钮的背景颜色和文字颜色。
<!DOCTYPE html>
<html>
<head>
<style>
button:hover {
backgroundcolor: blue;
color: white;
}
</style>
</head>
<body>
<button>悬停在我上面</button>
</body>
</html>
2、使用:active
伪类选择器
:active
伪类选择器用于选择鼠标按下元素时的样式,当用户按下一个按钮时,可以改变按钮的背景颜色和文字颜色。
<!DOCTYPE html>
<html>
<head>
<style>
button:active {
backgroundcolor: red;
color: white;
}
</style>
</head>
<body>
<button>按下我</button>
</body>
</html>
3、使用:focus
伪类选择器
:focus
伪类选择器用于选择获得焦点的元素的样式,当用户点击一个输入框时,可以改变输入框的边框颜色。
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
bordercolor: green;
}
</style>
</head>
<body>
<input type="text" placeholder="点击我">
</body>
</html>
4、使用:target
伪类选择器
:target
伪类选择器用于选择URL中的锚点目标元素的样式,当用户点击一个带有特定ID的链接时,可以改变该元素的背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
#target:target {
backgroundcolor: yellow;
}
</style>
</head>
<body>
<a href="#target">点击我</a>
<div id="target">我是目标元素</div>
</body>
</html>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)