html - 悬停时更改div的位置

Question

考虑遵循 HTML。我有.image并.details包裹在.wrap. 在外部.wrap，我有另一个 div .extra，我最初想隐藏它，但仅将鼠标悬停在图像 div上，我想将它向下滑动，以便它占据整个区域。.wrap

我正在尝试以下代码，但不起作用：

HTML：

<div class="box">
    <div class="wrap">
        <div class="image"><img src="http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg" /></div>
        <div class="details">xxx</div>
    </div>

    <div class="extra">hidden, show on hover over .image</div>
</div>

CSS：

.box{
    border: 1px solid red;
    width: 240px;       
}

.image{
    border: 1px solid green;
    position: relative;     
}

.extra{
    position: absolute;
    top: -100%;
    left: 0;
    background: green;
}

.box .image:hover .extra{
    top: 0;
}

演示：http: //jsfiddle.net/pv9jd/

Answer 1

Sorry to butcher your code but this may be able to help you:

<div class="box">
  <div class="image"></div>
</div>

This is the CSS:

.box div{
  color: #fff;
  width: 200px;
  height: 100px;
  position: relative;
  box-sizing: border-box;
  transition: border .7s ease;
}
.image{
  background: #fff url(http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg) bottom;
  border-top: solid 100px #ccc;
}

.image:hover{
  -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
  border: solid 0px;
}

You can read more here for the sliding.

You can also play around here: http://codepen.io/joe/pen/oqxJu

Answer 2

我相信你正在寻找类似这个图像悬停使用 jQuery

$('.image').hover(function(){
  $('.extra').css({'top' : '0'});
    },function(){
      $('.extra').css({'top' : '-100%'}
  );
});​

Answer 3

.extra不是 的孩子.image。

我通过替换为来更新.image小提琴.wrap:hover。

http://jsfiddle.net/UrKCs/2/

我不确定你是否想要那个，因为现在.extra悬停整个.wrapdiv 时会出现。

我再次更新它以仅将鼠标悬停在图像上

http://jsfiddle.net/UrKCs/5/