javascript - 在循环 Javascript 中更改悬停样式

Question

function closestById(el, id) {
  while (el.id != id) {
    el = el.parentNode;
    if (!el) {
      return null;
    }
  }
  return el;
}

var element = document.getElementsByClassName('btn fa-input');
for (var i = 0; i < element.length; i++) {
  yourTarget = closestById(element[i], 'container')

  var btnWidth = element[i].offsetWidth;
  var btnHeight = element[i].offsetHeight;

  var toplabel = yourTarget.childNodes[3];
  var bottomlabel = yourTarget.childNodes[5];
  
  toplabel.style.width = btnWidth - 20 + 'px';
  bottomlabel.style.width = btnWidth - 20 + 'px';

  // Here The CSS Line
  /*
  var labels_margin_hover = btnWidth+35;
  toplabel.style.margin = '-'+labels_margin_hover+'px 0 0 20px!important';
  */

}

.btn-slides-labels:hover .bottom-label {
  margin: -100px 0 0 10px;
}

<div id="container" class="btn-slides-labels">
  <input id="btn" class="btn fa-input" type="submit" value="Download">
  <span id="top-label" class="top-label">Downloads : 1546 Times</span>
  <span id="bottom-label" class="bottom-label">1.2MB .zip</span>
</div>
<div class="btn-slides-labels">
  <input style="padding: 25px 25px;" id="btn" class="btn fa-input" type="submit" value="Download">
  <span id="top-label" class="top-label">Downloads : 1546 Times</span>
  <span class="bottom-label">1.2MB .zip</span>
</div>

如何使用 javascript 修改上面的 css 行，并知道我想在循环中修改它。

在下面的示例中，我有两个动画按钮，在两个标签(向上和向下)上具有幻灯片效果。我想在按钮悬停时根据此按钮的高度修改“底部标签”的边距值。我想让它适应我有多个不同大小的按钮的情况。

COMPLETE EXAMPLE

Answer 1

如果我可以建议一个没有一点 javascript 的纯 CSS 解决方案，这里是如何做的:See this fiddle

我在父 .btn-slides-labels 上使用 relative 位置和子元素的 absolute 位置来定位它们，没有无论按钮有多大。

CSS:

body {
  margin-top: 100px;
  text-align: center;
}
.btn-slides-labels {
    display: inline-block;
    position: relative; 
}
.top-label, .bottom-label {
    background: #222;
    display: block;
    height: 40px;
    width: 100%; 
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    color: #fff;
    position: absolute;
    z-index: -1;
    box-sizing : border-box;

}
.bottom-label { 
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
     -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    transition: top 0.5s ease;
    line-height: 35px;
    top: 10px;
 }
 .top-label {
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
     -webkit-transition: bottom 0.5s ease;
    -moz-transition: bottom 0.5s ease;
    -o-transition: bottom 0.5s ease;
    -ms-transition: bottom 0.5s ease;
    transition: bottom 0.5s ease;
    line-height: 45px;
    bottom:10px;
}

/* HOVER */
.btn-slides-labels:hover .bottom-label { 
    top: -25px; 
 }

.btn-slides-labels:hover .top-label {
    bottom: -25px; 
}

 .btn {

     text-align: center;
     background: #dd3333;
     color: #f7f7f7;
     font-size: 023px;
     border-radius: 005px;
     padding: 15px 35px;
     box-shadow: 0 -003px rgba(0, 0, 0, 0.14) inset;
     display: inline-block;
     text-transform: uppercase; 
     text-decoration: none;
     margin: 10px 0px;
     transition: all 0.2s linear 0s;
     -moz-transition: all 0.2s linear 0s;
     -webkit-transition: all 0.2s linear 0s;
     -o-transition: all 0.2s linear 0s;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -o-border-radius: 5px;
     box-shadow: 0 -4px rgba(0, 0, 0, 0.14) inset;
     -moz-box-shadow: 0 -4px rgba(0, 0, 0, 0.14) inset;
     -webkit-box-shadow: 0 -4px rgba(0, 0, 0, 0.14) inset;
     -o-box-shadow: 0 -4px rgba(0, 0, 0, 0.14) inset;
     letter-spacing: 1.5px;
     border: none;
     cursor: pointer;
 }

  .btn:hover {
    background: #2ecc71;
  }