下面的例子展示了你如用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
分享到：
相关推荐
然而，在实际操作中，开发者可能会遇到一个常见的问题：当`scroll-view`内容超过其容器宽度时，左右滑动过程中超出部分的背景颜色无法正常显示。这会严重影响用户的浏览体验，使得内容区域看起来不完整或者断层。...
在CSS3中，我们可以利用各种特性来实现富有动态效果的网页设计，比如背景颜色的平滑过渡和文字的滚动切换。这些效果可以增加网站的视觉吸引力，提升用户体验。本篇文章将详细探讨如何通过CSS3实现这样的功能。 首先...
需要注意的是，如果同时设置了背景颜色和背景图片，则图片会覆盖在颜色之上。例如： ```css p { background-color: #ff0000; background-image: url('image.jpg'); } ``` 3. **`background-repeat`**：默认...
例如，可以设置星星在一段时间内缓慢地沿着Z轴移动，模拟星星闪烁的效果。 4. **背景颜色与透明度**： 设置背景颜色为深色或黑色，以增强星星的视觉对比。同时，可以通过调整星星元素的`opacity`属性，使它们在...
在`css`目录下的样式表中，我们可以设置导航菜单的基本样式和背景图片。这里的关键在于使用CSS的`background-position`属性来实现背景滑动的效果。例如： ```css nav { background-image: url(../images/1.jpg); ...
随着CSS3技术的发展，我们可以利用其强大的样式控制能力来创建出各种炫酷的进度条动画，其中背景颜色渐变的效果尤其引人注目。本篇文章将深入探讨如何利用CSS3实现这样的效果。 首先，我们要明白CSS3中的渐变概念。...
1. **背景颜色**：使用`background-color`属性设置背景颜色。例如： ```css div { background-color: #f00; /* 红色 */ } ``` 2. **背景图片**：使用`background-image`属性设置背景图片。例如： ```css div...
例如，我们可以为一个div元素定义一个背景颜色，并设置其透明度： ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 这里的最后一个...
在CSS（层叠样式表）中，设置图像与背景颜色是网页设计中的基本操作，而这个PPT学习教案主要介绍了如何使用CSS选择器来精确控制元素的样式，包括交集选择器、并集选择器、后代选择器以及CSS的继承特性。 首先，交集...
/* 悬停时子菜单项的背景色 */ } ``` 五、响应式设计 最后，为了确保下拉菜单在不同设备上都能良好工作，需要考虑响应式设计。例如，对于小屏幕设备，可以将菜单项堆叠显示： ```css @media (max-width: 768px) {...
在本主题"CSS多种颜色的进度条"中，我们将深入探讨如何使用CSS3来创建富有视觉吸引力且颜色多样的进度条。这些进度条可以从蓝色渐变到紫色，最后变为红色，并且能够显示具体的百分比值。 1. **CSS3简介** CSS...
- 设置背景色、高度、宽度等属性。 - 背景图使用`../images/sc_dh_bgM.jpg`并沿X轴重复显示。 - 外边距设为10像素，使元素居中显示。 19. **.sc_dha** - 设置链接的颜色为#4A842B（一种绿色）。 20. **.sc_...
在CSS中，我们可以使用单一的`background`属性来设置多个背景属性，如颜色、图像、重复方式、定位和混合模式等。背景缩写可以简化代码，提高效率。例如： ```css background: color image position/repeat/size ...
在CSS中，我们可以直接通过样式属性来设置`div`的宽度和背景颜色。但在JavaScript中，我们需要通过DOM（Document Object Model）来操作这些属性。 1. **设置宽度**： 在JavaScript中，我们使用`style.width`属性来...
对于雪花飘落背景，我们需要定义容器的背景颜色（通常是白色），并可能使用绝对定位或固定定位让雪花在整个屏幕内飘落。 3. **CSS动画与过渡**：通过CSS的`keyframes`规则可以创建动画，使雪花有上升和下降的过程。...
1. `background-color`：这个属性用于设置元素的背景颜色。你可以使用颜色名称、RGB值、十六进制颜色码或透明度（transparent）来指定颜色。例如： ```css background-color: blue; background-color: rgb(0, 0, ...
在本文中，我们将深入探讨如何使用JavaScript（js）和CSS3（层叠样式表）创建一个炫酷的彩色圆点冒泡背景动画特效。这个特效包括随机生成各种颜色的圆形，它们以动态的方式变大然后消失，同时允许用户通过拖动滑杆来...
1. **背景颜色**：通过`background-color`属性可以设置背景色。例如，`background-color: #333;`将设置背景为深灰色。 2. **背景图片**：使用`background-image`属性添加背景图片，如`background-image: url("path/...
CSS的主要作用是实现网页的布局和外观设计，使网页元素呈现出各种样式效果，如字体大小、颜色、对齐方式、边框、背景图像等。通过CSS，网页设计者可以精确控制页面的布局，使得内容和表现分离，提高了网页的可维护性...