0

次のHTMLを検討してください。私は持っていて.image、.details包みました.wrap。の外に、最初は非表示にしたい.wrap別のdivがありますが、画像divのみにカーソルを合わせると、下にスライドして、の領域全体を占めるようにします。.extra.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/

4

3 に答える 3

1

.extraの子ではありません.image。

に置き換えてフィドルを更新しまし.imageた.wrap:hover。

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

div.extra全体をホバーするとが表示されるので、それが必要かどうかはわかりません。.wrap

画像のみにホバーするように再度更新しました

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

于 2012-12-27T09:01:40.293 に答える
1

jQueryを使用してこの画像ホバーのようなものを探していると思います

$('.image').hover(function(){
  $('.extra').css({'top' : '0'});
    },function(){
      $('.extra').css({'top' : '-100%'}
  );
});​
于 2012-12-27T09:17:30.053 に答える
1

コードを削除して申し訳ありませんが、これはあなたを助けることができるかもしれません：

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

スライドについて詳しくは、こちらをご覧ください。

ここで遊ぶこともできます：http：//codepen.io/joe/pen/oqxJu

于 2012-12-27T10:03:56.747 に答える