CSS 过渡代码

Question

我在使用此 CSS 转换代码时遇到问题。它在悬停时扩展到一个新的高度，但我需要它在悬停或鼠标移出时回到原来的高度。 (就像铅笔广告一样)目前，在鼠标移开时它会保持展开状态并且光标停留在超链接上。当前页面链接是http://hswheels.autoconx.com/任何帮助将不胜感激。

.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 */
}

Answer 1

因为您将 anchor 设置为 position:absolute，所以它占据了整个页面。

您只需在父元素(在本例中为 .grow)上设置 position:relative，这样 anchor 绝对定位到父元素，而不是页面。

.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 */
}

添加了一个 fiddle :http://jsfiddle.net/3nuhev2k/2/