1

同じ幅と高さの4つのフロートdivがあります。

各divの間に、フローティングdivに関連する非表示のコンテンツdivがあります。

フロートされたdivのいずれかにカーソルを合わせると、対応するdivコンテンツが表示され、マウスアウトすると元の位置に戻ります。

jqueryを使用してこれを達成するにはどうすればよいですか？

コードサンプルについては、次のリンクをたどってくださいhttp://jsfiddle.net/NbVfD/22/

4

3 に答える 3

2

以下を使用します。

$('.box').hover(
    function(){
        $(this).next('.boxTxt').show();
    },
    function(){
        $(this).next('.boxTxt').hide();
    });​

JS フィドルのデモ。

上記を更新してfadeIn()/fadeOut()アニメーションを含める:

$('.box').hover(
    function(){
        $(this).next('.boxTxt').stop().fadeIn(900);
    },
    function(){
        $(this).next('.boxTxt').stop().fadeOut(900);
    });​

JS フィドルのデモ。

そして、次のように、要素を識別するclass代わりに使用するように HTML を修正します。id

id= 名前 [CS]

この属性は、要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。

class= cdata リスト [CS]

この属性は、クラス名またはクラス名のセットを要素に割り当てます。任意の数の要素に同じクラス名を割り当てることができます。複数のクラス名は空白文字で区切る必要があります。

(引用: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 )。

もちろん、単純な CSS でほぼ同じことを実現できます。

.box:hover + .boxTxt,
.boxTxt:hover {
    display: block; /* to show the element */
    width: 10em; /* aesthetics, adjust to taste... */
    height: 20em;
    background-color: #ffa;
    overflow: hidden; 
    overflow-y: scroll;
    margin-left: -10px;
}​

JS フィドルのデモ。

上記を更新して、CSS トランジション (利用可能な場合) が要素の表示/非表示をアニメーション化できるようにしました (このために、HTML も少し変更しました)。

#boxCon {width:100%}
.boxTxt{
    position: absolute;
    top: 1em; /* in order that there was a target area on the next .boxWrap to
                 to provide a :hover target area to mouse-over to trigger the
                 next .boxTxt to reveal */
    left: 100%;
    opacity: 0;
    z-index: 10;
    overflow: hidden;
    height: 0;
    width: 0;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;}

.box{width:50px; height:50px; background-color:#000; 
}

.boxWrap:hover .boxTxt{
    opacity: 1;
    display: block;
    width: 10em;
    height: 20em;
    background-color: #ffa;
    overflow: hidden;
    overflow-y: scroll;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

div.boxWrap {
    float: left; /* as originally assigned to .box elements */
    padding: 20px 5px; /* equal to the margins originally placed on the .box elements */
    position: relative; /* to allow for absolute positioning of the .boxTxt elements */
}

JS フィドルのデモ。

参考文献:

于 2012-07-09T12:41:10.107 に答える
0

これを実現するには、mouseenter() & mouseleave 関数を使用します。

<!DOCTYPE html>
<html>
<head>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
      $("p:last",this).text(++i);
    });

    var n = 0;
    $("div.enterleave").mouseenter(function(){
      $("p:first",this).text("mouse enter");
    }).mouseleave(function(){
      $("p:first",this).text("mouse leave");
      $("p:last",this).text(++n);
    });

</script>

</body>
</html>

参照 URL: http://api.jquery.com/mouseenter/

（正しいと判断した場合は、回答としてマークしてください。）

于 2012-07-09T12:40:29.763 に答える
0

実際の例を参照してください：

http://jsfiddle.net/rathoreahsan/4HvH3/

HTML

<div id="boxCon">

    <div class="box" data-img="boxTxt1"></div>
    <div id="boxTxt1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

    <div class="box" data-img="boxTxt2"></div>
    <div id="boxTxt2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</div>

Jクエリ:

$("#boxCon").on("mouseover mouseout", "div.box", function () {
    $("#" + $(this).data("img")).toggle();
});
于 2012-07-09T12:43:37.747 に答える