Question

当您将鼠标悬停在http://hijinxnetwork.net/web.html上的某个菜单按钮时，右侧的按钮，而不是左侧的按钮。我想左边的按钮也可以移动。

CSS：

#nav {
  width:800px;
margin:0 auto;
}
#nav ul {
  position:relative;
  top:187px;
  left:auto;
  right:auto;
}
#nav li {
  float:left;
  display:inline;
  display:block;
  margin-left:3px;
  margin-right:3px;
  padding-left:20px;
  padding-right:20px;
  font-family: 'Roboto', sans-serif;
  font-weight:100;
  text-transform:uppercase;
  font-size:24px;
  background-color: #363636;
  height:50px;
  padding-top:20px;
  transition: 1s;
  position:relative;
  left: 0;
}
#nav li:hover {
  font-size:30px;
  background-color:#a61919;
  height:60px;
  margin-right: -10px;
  left: -10px;
  margin-left:10px;
}
#nav li a {
  color:#ffffff;
  text-decoration:none;
}

Answer 1

按照您的代码，这应该有效：

#nav ul {
  left: 0px;
  right: 0px;
  transition: 1s;
}

#nav ul:hover {
   left: -5px;
   right: -5px;
}

这会使按钮向两侧移动。它将“扩展”动画添加到ul元素，每边5个像素。

当其中一个按钮悬停时，按钮向左移动

1 个答案: