方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
width: 600px;
height: 300px;
/*border:1px solid black;*/
margin: 100px auto;
position: relative;
}
.slider-outer {
width: 100%;
height: 100%;
}
.slder-item {
width: 100px;
height: 100%;
transform-style: preserve-3d;
transition: 1s;
position: absolute;
}
.img {
width: 100%;
height: 100%;
position: absolute;
}
.img:nth-child(1) {
background-image: url(images/1-1.png);
transform: rotateX(0) translateZ(200px);
}
.img:nth-child(2) {
background-image: url(images/1-2.png);
transform: rotateX(90deg) translateZ(200px);
}
.img:nth-child(3) {
background-image: url(images/1-3.png);
transform: rotateX(180deg) translateZ(200px);
}
.img:nth-child(4) {
background-image: url(images/1-4.png);
transform: rotateX(270deg) translateZ(200px);
}
.btns {
position: absolute;
height: 50px;
width: 100%;
top: calc(50% - 25px);
color: #ffffff;
font-size: 2em;
text-align: center;
line-height: 50px;
}
.prev,
.next {
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: rgba(0, 0, 0, .1);
}
.prev {
left: 0;
}
.prev:hover{
background-color: rgba(0, 0, 0, .5);
}
.next {
right: 0;
}
.next:hover{//在定义完next和prev样式之后，在各自后面像这样定义。
background-color: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="slider-outer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prev" id="prev"><</div>
<div class="next" id="next">></div>
</div>
</div>
</body>
</html>
<script>
var items = document.getElementsByClassName("slder-item"); //Array()数组 items[i]
for(var i = 0; i < items.length; i++) { // for in
var item = items[i];
item.style["left"] = item.offsetWidth * i + 'px';
item.style["transitionDelay"] = .3 * i + 's';
var sub = item.children;
for(var j = 0; j < sub.length; j++) {
var img = sub[j];
img.style["backgroundPosition"] = -item.offsetWidth * i + 'px';
}
}
// console.log(items.length);==6
//document.querySelector()
var num = 0;
document.getElementById('prev').addEventListener("click", function() {
var rotate = ++num * 90;
for(var i = 0; i < items.length; i++) {
items[i].style["transform"] = "rotateX(" + rotate + "deg)";
}
})
var num = 0;
document.getElementById('next').addEventListener("click", function() {
var rotate = --num * 90;
for(var i = 0; i < items.length; i++) {
items[i].style["transform"] = "rotateX(" + rotate + "deg)";
}
})
</script>
方法二：
//这是搜索button
.com-search-btn {
border-color: @foreBlue;
background: url("imgs/search-btn.png") no-repeat 10% 45%;
background-size: 14px 14px;
background-color: @foreBlue;
padding: 6px 15px;
padding-left: 25px;
&:hover {//也可以这样定义。在要定义样式本身内部定义，只不过要用到“&”这个符号。
background-color: #66b1ff;
border-color: #66b1ff;
}
}
方法三：
<!DOCTYPE html>
<html>
<head>
<style>
a:hover//也可以像这样直接定义标签。
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
</body>
</html>
以上三种方法都可以用，看那种方法更适合大家写的代码，就用哪种。撰写不易，希望大家支持！！！
