1

jQueryの「オブジェクト」の開発に問題があります。div1(下の画像を参照)を(背景画像の使用)の画像を含む背景divにします。次に、div 2(下の画像を参照)にdiv1をオーバーレイします。これを実行できます。しかし、私はjQueryの経験がほとんどないので、それは私が苦労している次の部分です。div 2にカーソルを合わせると、jQuery slideDown()/ slideUp()を使用してdiv 3を表示および非表示にします(下の画像を参照)。また、上にスライドするときに閉じないようにする必要があります(カーソルがdiv 2上にないため)。オブジェクト全体にカーソルを合わせていない場合にのみ、オブジェクトが閉じます。これが理にかなっていることを願っています...どこから始めればいいのかわかりません。さらに情報が必要な場合はお問い合わせください。

質問の説明

4

1 に答える 1

3

このような何かが私が信じていることをするはずです、あるいは少なくともそれはあなたに遊んで、さらに改善するための出発点を与えます。

マークアップ

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

.wrapper {
    float: left;
}
.one {
    background-color: grey;
    width: 100px;
    height: 100px;
}
.two {
    background-color: blue;
    width: 100px;
    height: 20px;
}
.three {
    background-color: green;
    width: 100px;
    height: 100px;
    display: none;
}​

JavaScript

$(function () {
    $(".two").mouseenter(function (){
         $(".one, .three").slideToggle();
    });
    $(".wrapper").mouseleave(function (){
         $(".one, .three").slideToggle();
    });
});​

実例: http: //jsfiddle.net/ZHxe5/1/

于 2012-08-19T13:45:16.287 に答える