您的位置:首页 > Web前端 > JQuery

jquery实现突出显示

2019-08-15 11:02 951 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_42309685/article/details/99624811

jquery实现突出显示

效果如下:

CSS部分

<style>
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.wrap {
width: 630px;
padding: 5px;
height: 420px;
border: 1px solid #eee;
cursor: pointer;
}
.wrap ul li {
float: left;
height: 200px;
width: 200px;
margin: 5px;
font: 700 30px/200px "microsoft yahei";
text-align: center;
color: #fff;
background-color: #06f;
opacity: 0.5;
}
</style>

body部分

<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$(".wrap").find("li").mouseenter(function(){
$(this).css("opacity","1").siblings().css("opacity","0.5");
});
$(".wrap").mouseleave(function(){
$(this).find("li").css("opacity","0.5");
});
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: