不规则边框样式
2022-04-24 本文已影响0人
禾苗种树
-
样式如下
list悬浮出现边框
- 知识点
悬浮左边list时
右边展示区域border-right：0;
左边的ul添加border-right:1px solid red;
左边当前list的width：calc(100% - 1px)就是比父及w多1px；[为了让当前选中的list右边没有border]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style lang="">
*{
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color: aliceblue;
}
.slot_wrapper{
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
}
.list{
/* padding: 10px 0; */
display: flex;
justify-content: start;
}
.menu{
/* background: #ffff; */
padding:0 0 10px 0;
width: 184px;
background: #ffff;
border-right: 1px solid #fff;
}
.menu li{
height: 38px;
padding:0px 12px 0px 16px;
border: 1px solid #fff;
/* text-align: center; */
display: flex;
justify-content: space-between;
line-height: 38px;
cursor: pointer;
background: #ffff;
}
.menu .li_active{
border: 1px solid #f95216;
border-right: 0;
width: calc(100% + 1px);
color: #f95216;
font-weight: 500;
padding-right: 14px;
}
.li_hovebor{
border-right: 1px solid #f95216;
}
.menu li a{
/* margin-left: 30px; */
font-size: 14PX;
color: #000;
}
.menu li:after{
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-right: 1px solid #999;
border-top: 1px solid #999;
transform-origin: 50% 50%;
transform: rotate(45deg);
border-color: #b8b8b8;
margin-top: 12.5px;
}
.sub_menu{
width: 766px;
/* margin-top: 26px; */
display: none;
padding-left: 0;
}
.sub_menu li{
width: 100%;
height: 324px;
border:1px solid #f95216;
border-left: 0;
display: none;
background: #ffff;
}
.disply_none{
display: none ;
}
.disply_blo{
display: block !important;
}
.guwenhelp{
background: #ffff;
width: 240px;
margin-left: 10px;
height:304px ;
border-radius: 10px;
overflow: hidden;
position: absolute;
right: 0;
top: 15px;
}
</style>
<body>
<div class="slot_wrapper">
<div class="list">
<ul class="menu">
<li><a href="">餐饮美食</a></li>
<li><a href="">教育培训</a></li>
<li><a href="">生活服务</a></li>
<li><a href="">美容养生</a></li>
<li><a href="">婴幼儿</a></li>
<li><a href="">生活家居</a></li>
<li><a href="">酒水饮料</a></li>
<li><a href="">服饰鞋帽</a></li>
</ul>
<ul class="sub_menu">
<li><a href="">1-美食</a></li>
<li><a href="">2-美食</a></li>
<li><a href="">3-美食</a></li>
<li><a href="">4-美食</a></li>
<li><a href="">5-美食</a></li>
<li><a href="">6-美食</a></li>
<li><a href="">7-美食</a></li>
<li><a href="">8-美食</a></li>
</ul>
</div>
<!-- 右边顾问帮选 -->
<div class="guwenhelp"></div>
</div>
</body>
<script>
$(function(){
// 不规则边框
$('.menu>li').mouseenter(function(){
let index = $(this).index();
$(this).addClass('li_active').siblings()
$('.menu').addClass('li_hovebor');
$('.sub_menu').addClass('disply_blo');
$('.sub_menu>li').eq(index).addClass('disply_blo').siblings().removeClass('disply_blo li_active');
})
$('.menu>li').mouseleave(function(){
let index = $(this).index();
$(this).removeClass('li_active').siblings();
$('.menu').removeClass('li_hovebor');
$('.sub_menu').removeClass('disply_blo');
$('.sub_menu>li').eq(index).removeClass('disply_blo');
})
})
</script>
</html>
