下面的例子展示了你如用CSS3展示当用鼠标经过的时候，改变背景的颜色。
<!DOCTYPE HTML>
<html>
<head>
<title>Setting a background color hover on a container using CSS</title>
<style type="text/css">
div {
margin-bottom: 20px;
padding: 10px;
}
div:hover {
background: #DDD;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, urna placerat condimentum vehicula, magna est suscipit leo, auctor laoreet erat massa eget tellus. Etiam pharetra, orci eu gravida tempus, enim est venenatis diam, id facilisis justo ante ut arcu. Sed nibh eros, porta ac porta ac, fermentum ut ante. Etiam pulvinar consectetur urna sit amet fermentum. Aliquam quis pellentesque tortor. In ut lobortis enim. Pellentesque luctus orci nec massa lacinia consectetur. Etiam cursus, leo et pellentesque tempus, diam elit interdum ipsum, sed pulvinar nibh justo vel urna. Phasellus ligula elit, sodales eget aliquet et, ullamcorper ut lorem. Praesent eget quam id ligula iaculis tincidunt eu et nulla. Ut dui dui, dictum sed lobortis eu, porta nec urna. In adipiscing, massa sed scelerisque elementum, tortor massa cursus velit, ut tincidunt mi lacus id magna. Morbi vestibulum venenatis massa sit amet convallis. Aliquam erat volutpat.</div>
<div id="d2">Nam a lacus ante, a tincidunt dolor. Sed felis dolor, ullamcorper vitae luctus at, iaculis eu dui. Mauris ullamcorper nisl id tortor elementum mattis. Aenean ut ligula ac ipsum pharetra dapibus. Praesent convallis tincidunt ligula sit amet adipiscing. Morbi massa mauris, mollis ornare mollis ut, imperdiet nec nibh. Praesent sollicitudin tellus at nisl sodales lobortis euismod purus laoreet. Vivamus nec urna vel nibh volutpat rhoncus quis eget justo. Donec mi lacus, dapibus nec tristique eu, fringilla id mi. Maecenas vitae odio a tortor cursus fermentum eu eget eros. Vestibulum sit amet metus purus. Integer vestibulum sem nec justo facilisis tempor non sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mattis metus.</div>
<div id="d3">Proin lacinia sem fringilla est lacinia facilisis. Praesent turpis massa, bibendum eu ultrices ut, viverra vitae quam. Morbi a lorem mi, eget congue arcu. Sed dapibus molestie neque, eget tempus nibh viverra at. Praesent sit amet vestibulum ipsum. Donec in lectus ac urna accumsan feugiat. Sed at nunc felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec ipsum justo. Nullam laoreet enim vel quam tincidunt imperdiet. Maecenas sollicitudin nulla a metus ornare tempus. Nullam rhoncus fermentum lorem id pellentesque.</div>
</body>
</html>
源码下载：
setting-a-background-color-hover-on-a-container-using-css.zip
分享到：
相关推荐
5.5.1 使用背景色定义背景 5.5.2 背景图片默认使用 5.5.3 背景图片的重复 5.5.4 背景图片的位置 5.5.5 背景图片的附件 5.6 背景的综合应用 5.6.1 背景的综合应用 5.6.2 背景颜色和背景图片的层叠 5.6.3 背景属性在...
通过CSS设置容器的宽度和高度，以及背景颜色为红色。可以使用width、height和background-color属性来实现。 使用CSS绘制五角星。可以通过伪元素（如:before和:after）来创建五角星的不同部分，使用border属性设置...
页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 （4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | ...
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以...
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
4.2.1 背景颜色 4.2.2 背景图片 4.2.3 背景定位 4.2.4 背景滚动 4.2.5 背景属性缩写 4.2.6 基于背景控制的导航优化 4.3 使用列表元素 4.3.1 ul无序列表 4.3.2 ol有序列表 4.3.3 改变项目符号样式 4.3.4 使用图片...
下面是一条简单的CSS规则，它把段落背景色设置为绿色 Example_1 p{background-color: green} CSS规则命名 一条CSS规则由选择符+声明两部分组成 选择符：指出要选择的元素 声明：由属性和值组成，属性指出影响元素哪...
背景backgroundcss说明background-image:url("图片的网址");背景图background:url("图片的网址");背景background-color:#色码;背景色彩Exp:background-image:url(背景图案.jpg,gif,bmp);background-color:#FFFFFF;...
二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上黑色的背景，让这款CSS3进度条更加鲜亮起来。 下面我们来看看实现这款进度条的过程和源码，代码主要由HTML、CSS以及jQuery...
动画背后的容器$container-width : $container-width $container-height : $container-height $container-color : $container-color背景色$container-rounding : $container-rounding入/边界半径$container-shadow ...
使标签div居于父容器右上角，设置内容居中显示，设置背景和字体颜色，旋转该div。 将父容器设置overflow: hidden，实现父容器对标签div超出部分的遮挡，即实现了标签效果。 结构展示 代码示例 <!DOCTYPE ...
2.在 CSS 文件中设置容器元素的样式，包括宽度、高度和背景颜色等。这里我们使用背景图片来显示雪花的效果，例如：其中，snow.jpg 是一个雪花图案的图片文件，可以在网上找到或自己设计。 3.在 JavaScript 文件中...
2.CSS样式：通过CSS样式设置轮播图容器的宽度、高度、背景颜色等样式属性，以及轮播项的布局和动画效果。 3.JavaScript交互：使用JavaScript编写轮播图的交互逻辑，包括切换轮播项、自动播放、手动控制等功能。常用...
11.8 在元素周围添加内边距 217 11.9 设置边框 219 11.10 设置元素周围的外边距 222 11.11 使元素浮动 224 11.12 控制元素浮动的位置 226 11.13 对元素进行相对定位 230 11.14 对元素进行绝对...
每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS...
◆ 实现背景色的渐变 ◆ 使用阴影美化容器或者图片 ◆ 实现二维空间中图像的移动、旋转、缩放倾斜等 ◆ 实现三维空间中的图像的移动、旋转、缩放等 ◆ 在页面中灵活使用过度的特效 ◆ 在页面中使用动画的特效 ...
效果 效果如下 实现思路 使用box-shadow属性画几个灰色的圆，将这些圆错落的组合在一起，...1、父容器样式，顺便给整个页面加一个背景色，方便预览 body{ background: rgba(73, 74, 95, 1); } .container{ width
Java中的正则表达式，简单易学，可以做爬虫... 使用了自定义的颜色变量来为背景色和文本颜色提供值，有助于使代码易于维护和修改；利用CSS的阴影效果和动画功能，创造逼真的"云朵"和流畅的"雨滴"动画；通过关键帧动画。