//要求1 使用style属性设置p标签的背景颜色设置为红色 //要求2 提前写好类样式 设置p的字体大小为48像素 字体颜色为白色 //当用户光标悬浮到p元素 应用此类样式 //当用户光标从p元素上移除 删除此类样式

可以使用以下代码实现这些要求：

HTML代码：

<p style="background-color: red" onmouseover="this.classList.add('hover')" onmouseout="this.classList.remove('hover')">这是一个段落</p>

CSS代码：

p {
  font-size: 48px;
  color: white;
}

p.hover {
  font-size: 48px;
  color: white;
  background-color: red;
}

解释：

1. 首先，在p标签中使用了style属性将背景颜色设置为红色。

2. 接着，在CSS代码中提前写好了p元素的类样式，设置了字体大小为48像素，字体颜色为白色。

3. 在HTML代码中，使用了onmouseover和onmouseout事件来实现当用户光标悬浮/移出p元素时应用/删除hover类样式。

4. 在CSS代码中，使用了.hover类选择器来定义当用户光标悬浮在p元素上时应用的样式，其中包括了背景颜色设置为红色，字体大小为48像素，字体颜色为白色。

相关问题

function//要求1 使用style属性设置p标签的背景颜色设置为红色 //要求2 提前写好类样式 设置p的字体大小为48像素 字体颜色为白色 //当用户光标悬浮到p元素 应用此类样式 //当用户光标从p元素上移除 删除此类样式

这是一段 JavaScript 代码，它实现了以下要求：

1. 使用style属性设置p标签的背景颜色为红色。
2. 提前定义了一个名为hover的类样式，设置了p标签的字体大小为48像素，字体颜色为白色。
3. 当用户鼠标悬浮到p元素上时，应用hover类样式。
4. 当用户鼠标移出p元素时，删除hover类样式。

具体实现代码如下：

const p = document.querySelector('p');

// 设置p标签的背景颜色为红色
p.style.backgroundColor = 'red';

// 定义名为hover的类样式
const hoverStyle = `
  font-size: 48px;
  color: white;
`;

// 当用户光标悬浮到p元素时，应用hover类样式
p.addEventListener('mouseover', function() {
  p.style.cssText += hoverStyle;
});

// 当用户光标从p元素上移除时，删除hover类样式
p.addEventListener('mouseout', function() {
  p.style.cssText = '';
});

解释如下：

1. 使用document.querySelector方法获取HTML页面中第一个p元素，并将其赋值给变量p。

2. 使用p.style.backgroundColor属性将p标签的背景颜色设置为红色。

3. 定义了一个名为hoverStyle的常量，值为一个字符串，其中包含了hover类样式的CSS代码。

4. 使用p.addEventListener方法为p元素添加mouseover事件和mouseout事件。当用户鼠标悬浮到p元素上时，调用匿名函数并在其中使用p.style.cssText属性将hover类样式添加到p元素中。当用户鼠标移出p元素时，调用匿名函数并在其中使用p.style.cssText属性将p元素的样式重置为空字符串，从而删除hover类样式。

function//要求1 使用style属性设置p标签的背景颜色设置为红色 //要求2 提前写好类样式 设置p的字体大小为48像素 字体颜色为白色 //当用户光标悬浮到p元素 应用此类样式 //当用户光标从p元素上移除 删除此类样式

可以使用以下 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像素，字体颜色为白色。