在按钮悬停时限制div的大小

Question

我正在使用css创建带有按钮的导航栏，我希望将鼠标悬停时具有背景色而无需调整div的大小。我希望按钮保持原位，只是在它们后面有背景色。

.topnav {
  overflow: hidden;
  background-color: #1C313A;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav-right {
  float: right;
}

button {
  padding: 0px 0px;
  background-color: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-left: 20px;
}

button:hover {
  width: 50px;
  height: 50px;
  background-color: #192C34;
  border-radius: 50%;
  padding: 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <a href="#news"><button>
            <i class="fa fa-upload fa-lg"></i>
          </button></a>

  <a href="#contact">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <div class="topnav-right">
    <a class="logo" style="pointer-events:none;">TidyBlocks</a>
  </div>
</div>

电流输出：

所需的输出

Answer 1

.topnav {
  overflow: hidden;
  background-color: #1C313A;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav-right {
  float: right;
}

button {
  padding: 0px 0px;
  background-color: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-left: 20px;
  width: 50px;
  height: 50px;
}

button:hover {      
  background-color: #192C34;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <a href="#news"><button>
            <i class="fa fa-upload fa-lg"></i>
          </button></a>

  <a href="#contact">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <div class="topnav-right">
    <a class="logo" style="pointer-events:none;">TidyBlocks</a>
  </div>
</div>

Answer 2

请不要在按钮上悬停高度和宽度。 是的，您不能将按钮元素放在未经验证的标签中。 请在https://validator.w3.org/上检查您的代码。

.topnav {
  overflow: hidden;
  background-color: #1C313A;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav-right {
  float: right;
}

button {
  border-radius: 50%;
  padding: 0px 0px;
  background-color: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-left: 20px;
  width: 50px;
  height: 50px;
}

button:hover {
  background-color: #192C34;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <a href="#news"><button>
            <i class="fa fa-upload fa-lg"></i>
          </button></a>

  <a href="#contact">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <div class="topnav-right">
    <a class="logo" style="pointer-events:none;">TidyBlocks</a>
  </div>
</div>