网页设计鼠标点击后文字变成白色，背景变成红色怎么写？

可以使用CSS来实现这个效果，可以给点击的元素添加一个点击事件，并在事件处理函数中修改元素的样式。

HTML代码：

<div class="box">点击我</div>

CSS代码：

.box {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  color: #333;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.box.clicked {
  background-color: red;
  color: #fff;
}

JavaScript代码：

var box = document.querySelector('.box');

box.addEventListener('click', function() {
  box.classList.add('clicked');
});

这样，当用户点击这个元素时，它的背景色和字体颜色就会变为红色和白色。

相关问题

网页设计鼠标经过时文字变成白色，背景变成红色，并且当鼠标点击后文字变成白色，背景变成红色怎么写？

你可以使用CSS的:hover伪类和:active伪类来实现这个效果。

例如，下面的代码将在鼠标悬停时将文字颜色设置为白色，背景颜色设置为红色：

button:hover {
  color: white;
  background-color: red;
}

而下面的代码将在按钮被点击时将文字颜色设置为白色，背景颜色设置为红色：

button:active {
  color: white;
  background-color: red;
}

你可以将这两个伪类合并在一起，以实现当鼠标悬停时文字变为白色，背景变成红色，并且当按钮被点击时，文字仍然为白色，背景仍然为红色的效果：

button:hover, button:active {
  color: white;
  background-color: red;
}

网页设计一个超链接，当鼠标经过时文字变成白色，背景变成红色，并且当鼠标点击后文字变成白色，背景变成红色怎么写？

你可以使用 CSS 来实现这个效果，具体的代码如下所示：

<a href="#" class="link">超链接</a>

.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` 属性来定义动画过渡效果，使颜色的变化更加平滑。