1. Three main points to master today
(1) Use of offset() attribute
(2) $(window).width() gets the viewport width
(3) The weight in !important uses 
https://www.runoob.com/css/css-important.html
2. Rendering:
(1) Description: When the mouse moves to the current area, the background color is displayed. When moving left and right, there is a left and right moving animation effect. When moving into the current area, the underline will come out from the left and when removed, the underline will disappear from the right.
3.html code structure
<div class="sub-menu-module js-sub-menu">
<!--Move background color-->
<div class="active-bg" style="left:0px; display: none;"></div>
<div class="sub-menu">
<ul class="sub-menu-item">
<li>
<a href="">
<div class="menu-list">
<img src="images/ewm1.png" alt="">
<p class="menu-des">Intelligent robot 1</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="menu-list">
<img src="images/zp1.png" alt="">
<p class="menu-des ">Intelligent Robot 2</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="menu-list">
<img src="images/zp2.png" alt="">
<p class="menu-des">Intelligent Robot 3</p>
</div>
</a>
</li>
</ul>
</div>
</div>
4.less style:
.sub-menu-module {
height: 120px;
background: rgba(44, 42, 42, 0.8);
margin: auto;
position: relative;
top: -1px;
.active-bg{
position: absolute;
top: 10px;
width: 110px;
height: 110px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px 12px 12px 12px;
transition: all 0.3s linear;
display: block;
}
.sub-menu {
width: 1300px;
margin: auto;
}
.sub-menu-item {
margin: auto;
text-align: center;
overflow: hidden;
}
li {
display: inline-block;
text-align: center;
padding: 10px 50px 0;
color: #fff;
line-height: 10px;
a {
cursor: pointer;
}
.menu-list {
width: 110px;
height: 110px;
cursor: pointer;
text-align: center;
display: inline-block;
position: relative;
img {
width: 70px;
height: 70px;
margin-bottom: -10px;
}
.menu-des {
position: relative;
display: inline-block;
line-height: 34px;
white-space: nowrap;
font-size: 14px;
color: #fff !important;
& amp;:after {
width: 0;
height: 1px;
background: #ffffff;
position: absolute;
right: 0;
content: '';
display: block;
transition: all 0.5s linear;
}
}
& amp;:hover {
.menu-des {
& amp;:after {
left: 0 !important;
width: 100%;
transition: all 0.5s linear;
}
}
}
}
}
}
5.jquer code:
$(function () {
var activeBg = $(".active-bg");
var menuList = $(".menu-list");
menuList.mouseenter(function () {
var width = $(this).width(); //width of menu-list
var offsetLeft = $(this).offset().left; //The distance from left to right relative to the viewport
// var windowWidth = $(window).width(); //Viewport width (depending on the situation)
//Background moving distance
activeBg.css('left',offsetLeft).show();
});
menuList.mouseleave(function () {
// activeBg.hide();
});
});
7. Summary + case code structure analysis:
(1) The above is the complete code of a complete case.
(2) We need to first set up a structure to create a moving effect for the background color.
<div class="active-bg" style="left:0px; display: none;"></div>
(3) At the same time, add a moving animation effect to the background color
.active-bg{
position: absolute;
top: 10px;
width: 110px;
height: 110px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px 12px 12px 12px;
transition: all 0.3s linear;
display: block;
}
(4) The underline hover effect appears from the left at the beginning, and the underline disappears from the right when leaving the hover and the animation effect:
.menu-des {
position: relative;
display: inline-block;
line-height: 34px;
white-space: nowrap;
font-size: 14px;
color: #fff !important;
& amp;:after {
width: 0;
height: 1px;
background: #ffffff;
position: absolute;
right: 0; //Disappear from the right
content: '';
display: block;
transition: all 0.5s linear;
}
}
& amp;:hover {
.menu-des {
& amp;:after {
left: 0 !important; //Display from left
width: 100%;
transition: all 0.5s linear;
}
}
}