css鼠标焦点代码

以下是一个简单的CSS代码示例，用于设置鼠标焦点样式：

/* 设置鼠标焦点样式 */
:focus {
  outline: none; /* 取消默认的焦点样式 */
  box-shadow: 0 0 5px #00ff00; /* 设置焦点时的阴影效果 */
}

/* 设置鼠标悬停样式 */
:hover {
  cursor: pointer; /* 设置鼠标悬停时的样式为手型 */
}

在上面的代码中，:focus 选择器用于设置鼠标焦点样式，:hover 选择器用于设置鼠标悬停样式。你可以根据需要自定义这些样式，比如修改颜色、边框等属性。

当鼠标焦点在某个元素上时，可以使用CSS的:focus伪类选择器来设置该元素的样式。以下是一些常见的鼠标焦点样式设置：

取消默认的焦点样式：

:focus {
  outline: none;
}

这样可以取消默认的焦点样式，避免出现默认的边框或者阴影效果。

设置焦点时的边框样式：

:focus {
  border: 2px solid #00ff00;
}

这样可以在元素获得焦点时，给它添加一个2像素宽的绿色边框。

设置焦点时的背景色：

:focus {
  background-color: #f0f0f0;
}

这样可以在元素获得焦点时，将其背景色设置为浅灰色。

设置焦点时的阴影效果：

:focus {
  box-shadow: 0 0 5px #00ff00;
}

这样可以在元素获得焦点时，给它添加一个绿色的阴影效果。

除了鼠标焦点样式，还可以使用:hover伪类选择器来设置鼠标悬停样式。例如，可以将鼠标悬停在一个按钮上时，将其背景色改变为淡蓝色：

button:hover {
  background-color: #b0e0e6;
}

这样当鼠标悬停在按钮上时，按钮的背景色会变成淡蓝色。

以上是一些常见的鼠标焦点和悬停样式设置，你可以根据需要进行调整和扩展。