先来看一下效果:
代码部分:
html:
<div id="box">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""width="600px" height="300px"></a></li>
</ul>
</div>
css
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
#box {
width: 700px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
li {
float: left;
width: 140px;
}
</style>
jQuery
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
$("#box li").mouseover(function(){
$(this).css("width","500px");
$(this).siblings("li").css("width","50px");
});
$("#box li").mouseout(function(){
$(this).css("width","");
$(this).siblings("li").css("width","");
})
});
</script>
全部代码->便于复制粘贴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
#box {
width: 700px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
li {
float: left;
width: 140px;
}
</style>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
$("#box li").mouseover(function(){
$(this).css("width","500px");
$(this).siblings("li").css("width","50px");
});
$("#box li").mouseout(function(){
$(this).css("width","");
$(this).siblings("li").css("width","");
})
});
</script>
</head>
<body>
<div id="box">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""width="600px" height="300px"></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""width="600px" height="300px"></a></li>
</ul>
</div>
</body>
</html>
总结
1.鼠标进出事件:mouseover,mouseout。
2.除自己外全部兄弟:siblings()。
3.获取自己之前的兄弟prev()。
4.获取自己之后的兄弟next()。
5.获取自己之前的全部兄弟prevAll()。
6.获取自己之前的全部兄弟nextAll()。
7.本人也刚刚入门若上述代码及表述有误,望看到的大佬及时指出并纠正,定虚心求教。