0

私はwookmarkで見られるのと同じマウスオーバーイメージ効果を達成しようとしていますが、これはjqueryとcssの魔法で行われていると思います。これがどのように行われるかを示す良いチュートリアルはありますか？

jqueryのドキュメントを見ると、次のようにホバーを使用する必要があるようです。

$("li.preview").hover(function(e){  
    // show and hide come css magic
});

そのCSS部分をどこに置くべきかわからない...

4

2 に答える 2

5

画像の周りにラッパーを作成し、そのラッパー内に、ホバー時に表示/非表示にするボタンを含めることができます。次に、画像にカーソルを合わせたときにこれらのボタンを表示/非表示にします。

HTML-

<span class="image-wrapper">
    <span class="image-options"></span>
    <img src="..." />
</span>

CSS-

.image-wrapper {
    position : relative;
    display  : inline-block;
}
.image-wrapper .image-options {
    position : absolute;
    top      : 0;
    right    : 0;
    left     : 0;
    height   : 25px;
    z-index  : 2;
    display  : none;
}
.image-wrapper:hover .image-options {
    display : block;
}

CSS3を使用して、オプション要素をフェードイン/フェードアウトすることもできます。

.image-wrapper {
    position : relative;
    display  : inline-block;
}
.image-wrapper img {
    position : relative;
}
.image-wrapper .image-options {
    position : absolute;
    top      : 0;
    right    : 0;
    left     : 0;
    height   : 25px;
    z-index  : 2;
    background         : grey;
    border             : 1px solid black;
    opacity            : 0;
    filter             : alpha(opacity=0);
    -webkit-transition : opacity 0.25s linear;
    -moz-transition    : opacity 0.25s linear;
    -ms-transition     : opacity 0.25s linear;
    -o-transition      : opacity 0.25s linear;
    transition         : opacity 0.25s linear;
}
.image-wrapper:hover .image-options {
    opacity            : 1;
    filter             : alpha(opacity=100);
}​

これはCSSのみを使用したデモです：http：//jsfiddle.net/fJsJb/

そしてもちろん、JSでフェードを発生させることができます：

$('.image-wrapper').on('mouseenter', function () {
    $(this).children('.image-options').stop().fadeIn(250);
}).on('mouseleave', function () {
    $(this).children('.image-options').stop().fadeOut(250);
});

JSを使用したデモは次のとおりです。http：//jsfiddle.net/fJsJb/1/

アップデート

top次のようにプロパティをアニメーション化して、スライドアニメーションを作成することもできます。

.image-wrapper {
    position : relative;
    display  : inline-block;
    overflow : hidden;
}
.image-wrapper img {
    position : relative;
}
.image-wrapper .image-options {
    position : absolute;
    top      : -25px;
    right    : 0;
    left     : 0;
    height   : 25px;
    z-index  : 2;
    background         : grey;
    border             : 1px solid black;
    -webkit-transition : top 0.25s linear;
    -moz-transition    : top 0.25s linear;
    -ms-transition     : top 0.25s linear;
    -o-transition      : top 0.25s linear;
    transition         : top 0.25s linear;
}
.image-wrapper:hover .image-options {
    top : 0;
}​

これがデモです：http：//jsfiddle.net/fJsJb/2/

于 2012-08-06T19:55:52.910 に答える
0

あなたはこのようなcssで行うことができます。

<style>
.imageBox { float:left; width:100px; height:100px; position:relative; background:#000; overflow:hidden; }
.imageBox .imageActions { position:absolute; top:0; left:0; width:100%; height:40px; background:#999; display:none; }
.imageBox img { width:100%; }
.imageBox:hover .imageActions { display:block; }
</style>

<div class="imageBox">
    <div class="imageActions "></div>
    <img src=".." />
</div>

デモ

于 2012-08-06T19:55:35.387 に答える