在轮播图中，我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变。通常在制作轮播图时，我们首先想到的是js中的交互。可是，如果我们无法使用js，只能单纯的靠css又该如何实现这一效果呢？下面，本人将向大家介绍一种最近实验出来的一种方法。
在介绍这种方法之前，本人觉得对于css中的某些伪类选择器有必要进行进一步的分析。
hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应。这一特性与js中的mousemove事件十分的相近，那么其是不是可以被近视地看做该事件呢？下面我们来做一个例子：
<style>.wrap{margin:0 auto;width:200px;height:200px;background:red;}.button{width:50px;height:50px;background:green;}.wrap:hover{background:yellow;}
</style>
<div class="wrap">
<div class="button"></div>
</div>
在这个例子中，我们将鼠标移向wrap盒子里的button盒子中时，里面的盒子背景没有改变，外面的盒子背景颜色变为了黄色。这是因为我们只在外面的盒子上设置了hover的样式，而里面的盒子没有设置，故而改变样式的只能是外面的盒子。那么，是否可以由此推断出css中的hover选择器也有js中事件的冒泡特性（在父元素和子元素上通是添加相同的事件，当触发子元素的该事件时，父元素也会触发该事件。）呢？要想解决这一问题，关键之处是当鼠标移动到绿色盒子中时，是先触发了子元素的hover再触发父元素的hover还是直接触发了父元素的hover。如果是前者，在页面中，子元素的位置不在父元素之中时，上述的效果仍会产生，如果不是，上述的效果不会发生。这时，我们只需要将子元素的位置移动到父元素之外即可，此时，子元素的css样式变为了
.button{
width:50px;
height:50px;
background:green;
position:absolute;
top:250px;
}
这里我们采用了绝对定位，将子元素移动到了父元素之外。此时，当我们再将鼠标移动到子元素中时，父元素的背景发生了改变。由此可以看出，css中的hover选择器的确如js中的事件那样具有冒泡特性。
知道了这点，我们再解决轮播效果接简单多了。我们只需要在父元素中设置宽高，并隐藏超出部分（overflow：hidden；），然后再在子元素中设置背景图片，最后在子元素中再添加子元素以作背景切换的按钮，并将其定位即可达到想要的效果。这里，本人做了一个小例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
/*清除默认间距*/
*{
margin:0;padding:0;
}
/*外层布局*/
.container{
width:600px;
height:300px;
margin:0 auto;
background:url(img/0.png) no-repeat left top;
background-size:100% 100%;
position:relative;
overflow:hidden;
}
ul{
list-style-type:none;
width:1800px;
height:300px;
}
ul li{
width:600px;
height:300px;
float:left;
}
/*按钮设置*/
.container ul li div{
width:30px;
height:30px;
background:red;
line-height:30px;
font-size:20px;
text-align:center;
border-radius:15px;
color:blue;
position:absolute;
z-index:5;
}
/*按钮定位，相对于外层容器*/
.first div{top:256px;left:500px;}
.second div{top:256px;left:533px;}
.third div{top:256px;left:565px;}
/*内层li背景设置*/
.first{
background:url(img/0.png) no-repeat left top;
background-size:100% 100%;
}
.second{
background:url(img/1.jpg) no-repeat left top;
background-size:100% 100%;
}
.third{
background:url(img/2.jpg) no-repeat left top;
background-size:100% 100%;
}
/*鼠标移入时，li向左平移*//*基于html的冒泡捕获，当点击li内的元素时，默认也点击了li元素*/
.second:hover{
transform:translate(-600px,0);
}
.third:hover{
transform:translate(-1200px,0);
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="first"><div class="btn">1</div></li>
<li class="second"><div class="btn">2</div></li>
<li class="third"><div class="btn">3</div></li>
</ul>
</div>
</body>
</html>
在上述例子中，我们移动鼠标，当其处于不同的按钮上时，背景图片发生了改变。
