Question

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

代码：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");
    })

Answer 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

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

1 个答案: