css里鼠标悬停变色怎么设置？

html-css022

css里鼠标悬停变色怎么设置？,第1张

css中悬停改变样式的最好方法是用伪类选择器div:hover{}。css代码示例如下：\x0d\x0a\x0d\x0adiv{width:100pxheight:200pxbackground:#000}\x0d\x0adiv:hover{background:#fff}\x0d\x0a\x0d\x0a这是一个修改背景颜色的示例，伪类里可以修改跟多的样式，宽度，高度或者字体大小，字体颜色都是可以修改的。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

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

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

3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。

4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>景安</title>

<style type="text/css">

       .zzidc{width: 200pxheight: 100pxbackground: red}

       .zzidc a{display: inline-blockline-height: 50pxwidth: 100px}

       .zzidc a:hover{background: gray}

</style>

</head>

<body>

<div class="zzidc"><a href="host.zzidc.com">测试</a></div>

</body>

</html>

css中，可以使用伪类选择器a:hover来改变背景颜色