html鼠标点击后变色
时间: 2024-02-23 11:52:54 浏览: 50
以下是一个简单的HTML鼠标点击后变色的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML鼠标点击后变色</title>
<style type="text/css">
.active {
background-color: red;
}
</style>
</head>
<body>
<div onclick="this.classList.add('active')">点击我变色</div>
</body>
</html>
```
当用户点击`<div>`元素时,`onclick`事件会触发,`this.classList.add('active')`会将`<div>`元素的`class`属性设置为`active`,从而改变其背景颜色为红色。
相关问题
html超链接点击后变色
可以使用CSS来实现超链接点击后变色的效果。
可以使用以下代码:
```css
a:link {
color: blue; /* 设置默认颜色为蓝色 */
}
a:visited {
color: purple; /* 设置访问过的链接颜色为紫色 */
}
a:hover {
color: red; /* 当链接处于鼠标悬停状态时,设置颜色为红色 */
}
a:active {
color: green; /* 当链接被点击时,设置颜色为绿色 */
}
```
在上面的代码中,`:link` 选择器用于设置默认情况下的链接颜色,`:visited` 选择器用于设置访问过的链接颜色,`:hover` 选择器用于设置鼠标悬停时的链接颜色,`:active` 选择器用于设置链接被点击时的颜色。可以根据自己的需要进行调整。
html li 标签点击后变色
可以使用CSS中的:active伪类来实现鼠标点击li标签时变色的效果。例如,以下代码会让li标签在鼠标点击时背景色变为灰色:
```html
<style>
li:active {
background-color: gray;
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
注意,:active伪类只在鼠标按下时生效,鼠标松开后就会失效。如果想要保持选中状态,需要使用其他方法,比如JavaScript。