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

.extra不是.image的孩子。

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

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

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

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

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

Answer 2

我相信您正在寻找类似image hover using jQuery

的内容

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

Answer 3

很抱歉要对您的代码进行屠宰，但这可能会对您有所帮助：

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

这是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;
}

您可以阅读更多here进行滑动。

你也可以在这里玩：http://codepen.io/joe/pen/oqxJu

在悬停时更改div的位置

3 个答案: