html鼠标悬浮在按钮上,让按钮背景变色

html-css020

html鼠标悬浮在按钮上,让按钮背景变色,第1张

1、首先创建一个新的html文件，如图所示。

2、在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg ，如图所示。

3、接着在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。

4、然后设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。

5、最后实用浏览器打开，保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。

首先需要找到这段字所在的标签，(如<p>标签)

之后设置当鼠标悬浮在该标签上时的样式,在css样式表中声明选择器 标签:hover(如p:hover)

x:hover为伪类样式，hover表示鼠标悬浮在这一标签上时

最后在{}中添加设置字体大小、颜色的代码(如 color:red)

超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

超文本标记语言（标准通用标记语言下的一个应用，外语缩写HTML），是迄今为止网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

实现鼠标经过背景变色的方法有很多，

方法一：直接写在HTML代码中。

<div onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">

html鼠标滑过 文字变色

</div>

方法二:先设置固定的样式，然后调用。

<style>

.d_over{background-color:#307172}

.d_out{background-color:#EFEFEF}

</style>

<div class="d_out" onmouseover="this.className='d_over'"

onmouseout="this.className='d_out'">哈哈哈哈哈</div>

方法三、使用<a>标签。这也是常用的方式

一般<a>是用来定义链接的样式的，并不是定义某个区域的。现在常用的div+css的网页用，div就是表示区域的意思，还是喜欢用这种，当然用table的话，会有更简单的方法。

其实现在用的较多的是用<a>标签实现的。

<style>

a {color:red

width:100pxheight:22pxline-height:22px}

a:hover {background:#f4f4f4

color:#000}

</style>

这样只要是代连接的都会变哦，你可以在某区域用，则某区域里面的所有来连接的都会鼠标经过变色。

也可以直接对一个区域的a标签写独立的样式。

例如：

<div class="bs">

<a>鼠标划过变由红变黑</a></div>

css中 设置:

.bs a {color:redwidth:100pxheight:22pxline-height:22px}

.bs a:hover {background:#f4f4f4color:#000}

这样，就不影响其他的a标签。