function//要求1 使用style属性设置p标签的背景颜色设置为红色 //要求2 提前写好类样式 设置p的字体大小为48像素 字体颜色为白色 //当用户光标悬浮到p元素 应用此类样式 //当用户光标从p元素上移除 删除此类样式
时间: 2023-09-14 12:07:15 浏览: 45
可以使用以下 JavaScript 代码实现这些要求:
```
const p = document.querySelector('p');
p.style.backgroundColor = 'red';
p.classList.add('hover');
p.addEventListener('mouseover', function() {
this.classList.add('hover');
});
p.addEventListener('mouseout', function() {
this.classList.remove('hover');
});
```
CSS代码:
```
p {
font-size: 48px;
color: white;
}
p.hover {
font-size: 48px;
color: white;
background-color: red;
}
```
解释:
1. 首先,使用querySelector方法获取第一个p元素,并使用style属性将其背景颜色设置为红色。
2. 然后,将hover类样式添加到p元素中,使其字体大小为48像素,字体颜色为白色。
3. 使用addEventListener方法为p元素添加mouseover事件和mouseout事件,当用户光标悬浮/移出p元素时,分别应用/删除hover类样式。
4. 在CSS代码中,使用了.hover类选择器来定义当用户光标悬浮在p元素上时应用的样式,其中包括了背景颜色设置为红色,字体大小为48像素,字体颜色为白色。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)