LOL部分网页
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/LOL.css">1.style
/css/common.css
*{box-sizing:border-box;margin:0;padding: 0;border: none;outline:none;font:14px/1.5 arial,"幼体";color:#666;
}
a{text-decoration:none;
}
ul{list-style:none;
}/css/LOL.css
body {background-color: rgb(206, 25, 25);
}.line2 {background-color: rgb(195, 219, 86);margin: 100px auto 0;width: 1191px;
}.hot-acts {background-color: rgb(83, 223, 223);width: 820px;height: 335px;
}.title {background-color: rgb(87, 226, 99);height: 35px;display: flex;align-items: center;
}.title>h2 {font-size: 24px;font-weight: 400;color: #333;margin-right: 30px;
}.title>h2:before {position: relative;top: 4px;left: -10px;display: inline-block;content: "";width: 4px;height: 24px;background-color: #1da6ba;
}.title>div {flex-grow: 1;height: 28px;display: flex;justify-content: space-between;border-bottom: #DDD 1px solid;
}.title>div>ul {width: 300px;display: flex;justify-content: space-between;
}.title>div>ul>li {cursor: pointer;
}.title>div>ul>li.selected {position: relative;color: #1da6ba;font-weight: 600;transition: all 0.2s ease;
}.title>div>ul>li.selected:after {position: absolute;left: 0;bottom: -3.5px;content: "";width: 100%;height: 7px;background: transparent url(/imgs/tab-title-selected.png) center bottom no-repeat;
}.content {background: blueviolet;height: 578px;margin-top: 22px;display: flex;justify-content: space-between;align-items: center;
}.content>a {position: relative;flex-basis: 193px;height: 278px;display: flex;flex-direction: column;background-color: white;transition: all 0.5s ease;
}.content>a:hover>div {display: flex;
}.content>a:hover>p {color: #1da6ba;
}.content>a:hover {transform: translateY(-10px);/* transform: scale(1.05); *//* transform: rotateX(360deg); *//* transform: skewY(30deg); */
}.content>a>div {padding: 0 15px;position: absolute;left: 0;top: 0;width: 100%;height: 206px;background-color: rgba(0, 0, 0, 0.8);display: none;justify-content: center;align-items: center;flex-direction: column;
}.content>a>div>h4 {color: #cdbe91;
}.content>a>div>h4+span {margin: 10px 0;
}.content>a>div>span {color: #BBB;
}.content>a>p,
.content>a>span {margin-left: 10px;
}.content>a>p {margin-top: 5px;
}.content>a>span {color: #1da6ba;margin-top: 20px;
}2.body
<section class="line2"><section class="hot-acts"><div class="title"><h2>热门活动</h2><div><ul><li class="select selected">正在进行</li><li class="select ">商城特惠</li><li class="select ">长期活动</li></ul><a href="#">更多-></a></div></div><div class="content"><a href="#"><div><p><h4>每周限时优惠</h4><span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span><span>2019-07-05 - 2019-07-08</span></p></div><img src="/imgs/p1.jpg" alt="" /><p>每周限时优惠</p><span>已结束</span></a><a href="#"><div><p><h4>每周限时优惠</h4><span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span><span>2019-07-05 - 2019-07-08</span></p></div><img src="/imgs/p2.jpg" alt="" /><p>每周限时优惠</p><span>已结束</span></a><a href="#"><div><p><h4>每周限时优惠</h4><span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span><span>2019-07-05 - 2019-07-08</span></p></div><img src="/imgs/p3.jpg" alt="" /><p>每周限时优惠</p><span>已结束</span></a><a href="#"><div><p><h4>每周限时优惠</h4><span>分享战斗技巧，精彩创意玩法，创作舞台给你，请开始你的表演》</span><span>2019-07-05 - 2019-07-08</span></p></div><img src="/imgs/p4.jpg" alt="" /><p>每周限时优惠</p><span>已结束</span></a></div></div></section><section class="download"></section>
</section>3.JS
<script>var sels = document.getElementsByClassName("select");for (var i = 0; i < sels.length; i++) {(function (i) {sels[i].onmouseenter = function () {for (var i = 0; i < sels.length; i++) {var cn = sels[i].className.split(" ");sels[i].className = cn[0];}this.className = "select selected";}})(i);}
</script>
