Question

我当前遇到的问题是我创建的所有按钮都没有对它们的悬停效果。上面是我拥有的代码的一小部分。我相当确定这是由于我将每个按钮都包裹在宽度/高度div中而导致的，但是我不确定如何将它们放置在其他位置。这个假设也很可能是错误的。

  handleAWSFile = e => {
    e.preventDefault();

    console.log("clicked");

    axios
      .post("files/upload_aws")
      .then(res => {
        this.props.handleSnackBar("File added to AWS");
      })
      .catch(res => {
        this.props.handleSnackBar("File NOT added to AWS!!");
      });
  };

#testContainer {
    width: 800px;
    height: 500px;
    display: inline-block;
    position: relative;
    text-align: center;
}

.testButtonsDiv {
    position: absolute;
    width: 100%;
    height: 100%;
}

.testButtons {
    width: 70px;
    height: 70px;
    background-color: rgb(71, 71, 71);
    color: white;
}

#testButton1 {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid rgb(255, 166, 0);
}
#testButton1:hover {
    background-color: rgb(255, 166, 0);
}

#testButton2 {
    margin-right: 300px;
    margin-top: 50px;
    border: 1px solid rgb(255, 166, 0);
}
#testButton2:hover {
    background-color: rgb(255, 166, 0);
}

Answer 1

删除.testButtonsDiv并使用position: absolute，top和left定位两个按钮：

#testContainer {
  position: relative;
  width: 800px;
  height: 500px;
  display: inline-block;
  text-align: center;
}

.testButtons {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: rgb(71, 71, 71);
  color: white;
}

#testButton1 {
  left: calc(50% - 35px);
  border: 1px solid rgb(255, 166, 0);
}

#testButton1:hover {
  background-color: rgb(255, 166, 0);
}

#testButton2 {
  top: 50px;
  left: 215px;
  border: 1px solid rgb(255, 166, 0);
}

#testButton2:hover {
  background-color: rgb(255, 166, 0);
}

<div id="testContainer">
  <button id="testButton1" class="testButtons"></button>
  <button id="testButton2" class="testButtons"></button>
</div>

在重叠的div上悬停效果吗？

1 个答案: