我有覆盖div
,并在鼠标悬停时显示子div
。我想要的是根据nth-child
选择器调整左侧位置百分比。如果它的第一个div那么左边应该是50%而第二个元素的左边应该是40%,依此类推。我该怎么做。请帮我。提前谢谢。
HTML
<div class="row mycustombox">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
<a href="#" class="customoverlay">
<img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
<div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
<h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
<a href="#" class="customoverlay">
<img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
<div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
<h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
<a href="#" class="customoverlay">
<img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
<div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
<h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 hidden-md hidden-sm hidden-xs" style="height: 300px; margin-bottom: 15px;">
<a href="#" class="customoverlay">
<img src="http://silver11.net/door/wp-content/uploads/2015/12/Furniture-EDI-for-the-Furniture-Industry.jpg" style="width: 100%; height: 300px;">
<div class="inneroverlaybox" style="height: 300px; display: none; transition: all 0.35s ease-in-out;">
<h3 data-fontsize="16" data-lineheight="24">World Class EDI for the Home Furnishing Industry</h3>
</div>
</a>
</div>
</div>
CSS
.customoverlay {
position: relative;
display: block;
width: 100%;
}
.customoverlay img {
margin: 0;
padding: 0;
}
.customoverlay .inneroverlaybox {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
overflow: hidden;
-webkit-transition: opacity 0.3s ease-in-out 0s;
-moz-transition: opacity 0.3s ease-in-out 0s;
-ms-transition: opacity 0.3s ease-in-out 0s;
-o-transition: opacity 0.3s ease-in-out 0s;
background: #002137;
}
.customoverlay .inneroverlaybox h3 {
position: relative;
left: 100%;
padding: 0;
margin: 0;
color: #fff;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.customoverlay:hover .inneroverlaybox { opacity: 1; }
.customoverlay:hover .inneroverlaybox h3:nth-child(1) { left: 1.5%; }
.customoverlay:hover .inneroverlaybox h3:nth-child(2) { left: 40% !important; }
.customoverlay:hover .inneroverlaybox h3:nth-child(3) { left: 40% !important; }