0

mouseOverJQueryにスパンを表示またはホバーさせようとしています。私がしたいのは、 にカーソルを合わせるbox1と"sale"が表示されることです。機能していません。誰か助けてもらえますか?

JSフィドル

HTML:

<div id="columnOne">
        <span id="sale">for sale</span>

       <div id="box1"></div>

        <div id="box2"></div>
    </div>

CSS:

#sale{width: 85px;
    margin: 0 0 -45px 15px;
    padding: 5px;
    position: relative;
    display: none;
    font-size: 14pt;
    font-family: 'oxygen', serif;
    background-color: #000;
    color: #fff;
    text-transform: uppercase;

    -webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    border-radius: 5px 5px;}

#box1{width: 240px;
    height: 220px;
    margin: 10px;
    position: relative;
    display: block;
    background-color: #4174a8;
    background-image: url(../images/crown.png);
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;}

JQuery:

$(document).ready(function(){
    $('#boxt1').hover(function(){
        $('#sale').mouseOver('fast');
    });

});
4

2 に答える 2

4

いくつかの問題があります：

  • イベントである mouseOver を使用している代わりに、fadeIn を使用していません。
  • セレクターが正しくありません。
  • box1 に負の z-index があるため、その親がより高い z-index を持っているため、ホバーすることはありません。
  • また、デフォルトdivではブロックレベルの要素であるため、コンテナの幅全体を占めるため、divの右側に移動してもまだdivにあるため、mouseleaveがトリガーされないことに注意してください。代わりにfloat/make をinline-blockdiv にして、指定されたディメンションのみを取るようにすることができます。

試す

$(document).ready(function () {
    $('#columnOne').hover(function () {
        $('#sale').fadeToggle('fast');
    });

});

フィドル

于 2013-09-24T00:30:09.430 に答える
1

問題を引き起こしている可能性がある $('#box1') ではなく、jQuery で $('#boxt1') をターゲットにしています。マウスオーバー イベントをトリガーする理由がわかりません。これはうまくいくはずです：

$(document).ready(function(){
    $('#box1').hover(
        function(){
            $('#sale').stop().fadeIn();
        }, 
        function(){
            $('#sale').stop().fadeOut();
        }
    );
});
于 2013-09-24T00:32:01.590 に答える