网页设计一个超链接,当鼠标经过时文字变成白色,背景变成红色,并且当鼠标点击后文字变成白色,背景变成红色怎么写?
时间: 2024-05-10 16:18:45 浏览: 10
你可以使用 CSS 来实现这个效果,具体的代码如下所示:
```html
<a href="#" class="link">超链接</a>
```
```css
.link {
color: black; /* 初始文字颜色 */
background-color: white; /* 初始背景颜色 */
transition: all 0.3s ease-in-out; /* 动画过渡效果 */
}
.link:hover {
color: white; /* 鼠标经过时文字颜色 */
background-color: red; /* 鼠标经过时背景颜色 */
}
.link:active {
color: white; /* 鼠标点击时文字颜色 */
background-color: red; /* 鼠标点击时背景颜色 */
}
```
上面的代码中,我们使用 `.link` 类来定义超链接样式,并使用 `color` 和 `background-color` 属性来设置文字和背景颜色。当鼠标经过时,我们使用 `:hover` 选择器来改变文字和背景颜色,当鼠标点击时,我们使用 `:active` 选择器来改变文字和背景颜色。此外,我们还使用 `transition` 属性来定义动画过渡效果,使颜色的变化更加平滑。
相关问题
运用css实现小标题为超链接,当鼠标悬浮到每个小标题上时,文字由黑色变为红色并添加下划线
可以使用以下CSS代码实现:
<h2><a href="#" class="subheading">小标题</a></h2>
.subheading:hover {
color: red;
text-decoration: underline;
}
当鼠标悬浮到.subheading类的<a>标签上时,文字颜色会变为红色并且添加下划线效果。
帮我写一个以伪类选择,小标题是超链接,鼠标悬浮到每一个小标题上时,文字由黑色变为红色病添加下划线
可以使用以下 CSS 代码实现:
a:hover {
color: red;
text-decoration: underline;
}
其中,a:hover 表示当鼠标悬浮在超链接上时生效,color: red; 表示将文字颜色改为红色,text-decoration: underline; 表示在文字下方添加下划线效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)