Question

我创建了一些带有悬停和活动效果的简单按钮，它们工作得很好。如果一行中有多个按钮，则悬停/单击该按钮不会导致问题。但是，如果一行上只有一个按钮，将鼠标悬停在其上或点击它会导致其他元素移动其位置。我尝试使用margin-top和top定位，但同样的问题也出现了。这种情况发生在Chrome中。

这是我的设置：

HTML：

<button>NO</button><button>PROBLEM</button><br />
<button>PROBLEM</button><br />
<button>NO</button><button>PROBLEM</button>

CSS：

body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}

button {
  position: relative;
  border-width: 0 1px 4px 1px;
  border-color: #d9372e;
  border-style: solid;
  background-color: #ff4136;
  padding: 8px 12px 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #fff;
  outline: none;
}

button:hover {
  top: 1px;
  border-bottom-width: 3px;
}

button:active {
  top: 2px;
  border-bottom-width: 2px;
}

修改：JSFiddle

Answer 1

当你对它们应用边距和边框宽度时，按钮的outerHeight在:hover / :active上被更改，另一个按钮必须以某种方式进行补偿，因为它们更小。

无论如何，要解决您的问题，请在悬停/活动样式上应用margin-bottom以平衡outerHeight（或底部到4px总计），如下所示：

button:hover {
 top: 1px;
 border-bottom-width: 3px;
 margin-bottom:1px;
}

button:active {
 top: 2px;
 border-bottom-width: 2px;
 margin-bottom:2px;
}

示例：http://jsfiddle.net/p6ohgy5n/2/

按钮悬停更改其他元素＆＃39;位置

1 个答案: