悬浮效果

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -1362,10 +1362,13 @@ body{
     background-color: #e5dfda;
 }
 .k_among .k_among_bottom .k_list_one{
-    overflow: hidden;
+    /*overflow: hidden;*/
+    height: 20px;
+    width: 300px;
     margin-top: 24px;
 }
 .k_among .k_among_bottom .k_list_one .k_one{
+    float: left;
     display: inline-block;
     width: 16px;
     height: 16px;
@@ -1381,6 +1384,12 @@ body{
 .k_among .k_among_bottom .k_list_one span{
     float: left;
 }
+.k_among .k_among_bottom .k_list_one div{
+    position: relative;
+    float: left;
+    height: 20px;
+    width: 200px;
+}
 .k_among .k_among_bottom .k_list_one a{
     float: left;
     display: inline-block;
@@ -1390,11 +1399,30 @@ body{
     color: #333333;
     text-align: left;
 }
+.k_among .k_among_bottom .k_list_one a:before{
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    height: 1px;
+    border-bottom: 2px solid #e41f2b;
+    width: 0px;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+}
+.k_among .k_among_bottom .k_list_one:hover a:before{
+    width: 100%;
+    left: 0;
+}
 .k_among .k_among_bottom .k_list_one:hover a{
     color: #e41f2b;
 }
 .k_among .k_among_bottom .k_list_one .k_data{
     display: inline-block;
+    margin-right: 10px;
     width: 35px;
     font-size: 14px;
     color: #999999;
@@ -1547,6 +1575,7 @@ a.x_gray_text{
     border-top: 1px solid #e8e8e8;
 }
 .x_item_list li {
+    position: relative;
     font-size: 14px;
     margin-bottom: 10px;
 }
@@ -1563,13 +1592,31 @@ a.x_gray_text{
     margin-left: 6px;
     color: #000;
 }
+.x_item_list li a:before{
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    height: 1px;
+    border-bottom: 2px solid #e41f2b;
+    width: 0px;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    transition: all 0.3s;
+}
+.x_item_list li:hover a:before{
+    width: 100%;
+    left: 0;
+}
 .x_item_list li span {
     float: right;
 }
 .x_item_list li.active a,.x_item_list li:hover a{
     color: #e41f2b;
     font-weight: bold;
-    border-bottom: 1px solid #e41f2b;
+    /*border-bottom: 1px solid #e41f2b;*/
 }
 /*第三列*/
 .third_col {

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/index.html

@@ -908,55 +908,25 @@
 					<div class="k_among_bottom">
 						<div class="k_list_one">
 							<span class="k_one k_red">1</span>
-							<a href="">自动跟随行李箱方案开发</a>
+							<div><a href="">自动跟随行李箱方案开发</a></div>
 							<span class="k_data">8-24</span>
 							<span class="k_count">100+</span>
 						</div>
 						<div class="k_list_one">
 							<span class="k_one k_red">2</span>
-							<a href="">自动跟随行李箱方案开发</a>
+							<div><a href="">自动跟随行李箱方案开发</a></div>
 							<span class="k_data">8-24</span>
 							<span class="k_count">100+</span>
 						</div>
 						<div class="k_list_one">
 							<span class="k_one k_red">3</span>
-							<a href="">自动跟随行李箱方案开发</a>
+							<div><a href="">自动跟随行李箱方案开发</a></div>
 							<span class="k_data">8-24</span>
 							<span class="k_count">100+</span>
 						</div>
 						<div class="k_list_one">
 							<span class="k_one">4</span>
-							<a href="">自动跟随行李箱方案开发</a>
-							<span class="k_data">8-24</span>
-							<span class="k_count">100+</span>
-						</div>
-						<div class="k_list_one">
-							<span class="k_one">5</span>
-							<a href="">自动跟随行李箱方案开发</a>
-							<span class="k_data">8-24</span>
-							<span class="k_count">100+</span>
-						</div>
-						<div class="k_list_one">
-							<span class="k_one">6</span>
-							<a href="">自动跟随行李箱方案开发</a>
-							<span class="k_data">8-24</span>
-							<span class="k_count">100+</span>
-						</div>
-						<div class="k_list_one">
-							<span class="k_one">7</span>
-							<a href="">自动跟随行李箱方案开发</a>
-							<span class="k_data">8-24</span>
-							<span class="k_count">100+</span>
-						</div>
-						<div class="k_list_one">
-							<span class="k_one">8</span>
-							<a href="">自动跟随行李箱方案开发</a>
-							<span class="k_data">8-24</span>
-							<span class="k_count">100+</span>
-						</div>
-						<div class="k_list_one">
-							<span class="k_one">9</span>
-							<a href="">自动跟随行李箱方案开发</a>
+							<div><a href="">自动跟随行李箱方案开发</a></div>
 							<span class="k_data">8-24</span>
 							<span class="k_count">100+</span>
 						</div>