寻找一种在 div 之间滑动底部边框的方法答案

【问题标题】：Looking for a way to slide a bottom border between divs寻找一种在 div 之间滑动底部边框的方法
【发布时间】：2016-04-08 15:56:42
【问题描述】：

我正在寻找一种将边框底部滑动到鼠标悬停在每个图像上的方法。目前，当我单击每个图像时，边框底部类从其他图像中删除并添加到单击的图像中。有没有办法让它变成滑动效果？

Image of website area

代码：https://jsfiddle.net/PeterR/dbbwfbws/

$(document).ready(function () {
        $("#feature1").addClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature1").click(function () {
        $("#feature1").addClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature2").click(function () {
        $("#feature1").removeClass("iconunderline");
        $("#feature2").addClass("iconunderline");
        $("#feature3").removeClass("iconunderline");
    })

    $("#feature3").click(function () {
        $("#feature1").removeClass("iconunderline");
        $("#feature2").removeClass("iconunderline");
        $("#feature3").addClass("iconunderline");
    })

【问题讨论】：

底部边框当前在悬停时移动，至少在 Chrome/Windows 上：jsfiddle.net/dbbwfbws/3
对this question 的回答提供了一种向非图像背景添加滑动效果的方法。

标签： jquery html css animation slide

【解决方案1】：

这是一种 css 方法

#section2{
	width: 100%;
	height: 650px;
	/*background-color: #f5f7f9;*/
	position:relative;
    background-color:#e15915;
}

#section2:after{
	content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

#section2-container{
	margin: 0 auto;
	width: 1100px;
}

#features-images{
	margin: 0 auto;
	width: 632px;
 

}

.featureicon{
  position:relative;
	margin-top: 50px;
	width: 175px;
	height: 175px;
  display: inline-block;
  overflow:visible;
   border:solid;
   
}

.featureiconimage{
  position:absolute;
	width: 100%;
  padding-bottom:0px;
  transition-property:padding,border;
  transition-duration:0.5s;
  -moz-transition-property:padding,border;
  -moz-transition-duration:0.5s;
  -webkit-transition-property:padding,border;
  -webkit-transition-duration:0.5s;
  -ms-transition-property:padding,border;
  -ms-transition-duration:0.5s;
}

#feature2{
	margin-left: 50px;
	margin-right: 50px;
}

.featureiconimage:hover{
	cursor: pointer;
	padding-bottom:20px;
  border-bottom: 5px solid white;
  
  
}

<div id="section2">
  <div id="features-images">  
    <div class="featureicon" id="feature1">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
    <div class="featureicon" id="feature2">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
    <div class="featureicon" id="feature3">
      <img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
    </div>
</div>
</div>
</div>

注意：我的大多数前缀为过渡属性。您可以添加其余部分：D

【讨论】：