Question

我试图这样做：当鼠标在按钮上时，跨度的底部填充必须增加。这是我的按钮：

<button class="btn btn-success btn-circle" id="myBtn" title="Go to top">
    <span id="move" class="fa fa-chevron-up"></span></button>

我试图用js添加一个底部填充大于默认值（3px）的类。

我的课程：

.set {
        padding-bottom:13px;
    }

这是我的js：

window.onload = function() {
        document.getElementById("myBtn").onmouseover = function() {
            document.getElementById("myBtn").classList.add(" set");
        }
    }

但它对我不起作用。你能帮助我吗？（当鼠标不再按下时，我必须这样做，跨度的底部填充也会以3px的速度返回）谢谢。

Answer 1

您只需使用css：

即可

 :hover // when mouseenter to elment

<强>解释

padding-bottom:13px;

您必须padding-bottom=13px;而不是msg-template

Answer 2

删除班级作业中的空间" set"应为"set"。您还可以在变量document.getElementById("myBtn")中设置elem，这样您就不需要再次从DOM重复get元素。

window.onload = function() {
  var elem = document.getElementById("myBtn");
  elem.onmouseover = function() {
    elem.classList.add("set");
  }
}

.set {
  color: red;
}

<button class="btn btn-success btn-circle" id="myBtn" title="Go to top">
<span id="move" class="fa fa-chevron-up">someIcon</span></button>

Answer 3

可能的解决方案可能是使用CSS3：https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1。而不是操纵宽度，你必须改变填充底部值。

Answer 4

我不完全确定我是否得到它...我认为你想要向内移动内部跨度而不是增加按钮本身的填充......所以：

db.organizationEntries.findAll()
.then(entries => {
  return entries.reduce((previousPromise, entry) => {
    console.log(entry)

    return previousPromise
    .then(_ => {
      return db.organizationEntries.findAll({
        where: {
          organizationId: entry.organizationId
        },
        attributes: [
          [
            db.sequelize.fn('MAX', db.sequelize.col('organizationEntries.serial_number')),
            'maximum_serial_no'
          ]
        ]
      })
    })
    .then(orgEntry => {
      console.log(orgEntry[0].dataValues.maximum_serial_no)
      let data = { serialNumber: orgEntry[0].dataValues.maximum_serial_no + 1 }
      console.log(data)
      return db.organizationEntries.update(data, { where: { id: entry.id } })
    })
    .then(updatedEntry => {
      console.log(updatedEntry)
    })
  }, Promise.resolve())
})
.then(result => {
  // result: Last updated organization entry
  console.log('finished')
})

你可以这样动画：

#myBtn:hover #move {
    position: relative;
    top: -3px; // or whatever you want
}

PS：在你的问题中，#move { position: relative; top: 0px; transition: all ease-in-out 0.3s; } #myBtn:hover #move { position: relative; top: -3px; // or whatever you want }有许多答案。但是padding-bottom会影响父母的大小...我认为这不是你想要的......所以padding-bottom与top结合使用似乎更加强大。

当鼠标在按钮上时向上跨越

4 个答案: