CSS转换代码

这个css转换代码有问题。它在悬停时会扩展到一个新的高度，但我需要它在悬停或鼠标移出时返回到原始高度。（像一个铅笔广告）目前，在mouseout上，它保持展开状态，光标停留在超链接上。当前页面链接为 任何帮助都将不胜感激

.grow {
  height: 30px; /* Origional height */
  width: 780px; /* Origional width */
  transition:height 0.5s  ease-in-out; /* Animation time */
  -webkit-transition:height 0.5s  ease-in-out; /* For Safari */
}
.grow:hover {
  height: 345px; /* This is the height on hover */
  background:url('http://www.heraldstandard.com/app/media/wheels/expanded2.jpg')
}
.grow:hover a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none; /* No underlines on the link */
  z-index: 10; /* Places the link above everything else in the div */
  background-color: #FFF; /* Fix to make div clickable in IE */
  opacity: 0; /* Fix to make div clickable in IE */
  filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

---

因为你把你的锚定设置为位置：绝对，它占据了整个页面

您只需要在父元素（在本例中为.grow）上设置position:relative，以便锚定绝对定位到父元素，而不是页面

.grow {
  position:relative;  
  height: 30px; /* Origional height */
  width: 780px; /* Origional width */
  transition:height 0.5s  ease-in-out; /* Animation time */
  -webkit-transition:height 0.5s  ease-in-out; /* For Safari */
}

---

添加了一个提琴：

您的问题似乎是悬停时链接的100%高度和100%宽度。它和你的网站一样大。

啊，比我快。这是我的建议，仅供参考。