在CSS中如何实现鼠标移上去后,字体变颜色?

html-css012

在CSS中如何实现鼠标移上去后,字体变颜色?,第1张

1、首先,打开HTML编辑器并创建一个新的HTML文件,比如index.html。

2、在index.html中的<style>标签中,输入css代码:button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、当浏览器运行索引index.html页面中,出现蓝色背景颜色的按钮。

4、将鼠标移到按钮上,按钮的背景颜色将变为橙色。

css把button做成绿色可以通过以下来改变颜色

<button value="ch1" >选项一</button>

如果不加class或者id,可以这样写:

button{ background-color:#ff0000}

<button class="btn1" value="ch1" >选项一</button>

如果加个class,可以这样写:

.btn1{ background-color:#ffff00}

给确认按钮加一个css样式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

.btn{background:#f00}

</style>

</head>

<body>

<label>

<input name="button" type="submit" class="btn" id="button" value="确认" />

</label>

</body>

</html>

补充一下,这个是按钮背景变成红色,要是字体颜色可以在样式里面写成:color:#f00