0

私はjoomlaメニューを使用していて、マウスがメニューにカーソルを合わせたときに1つの効果を出そうとしました（「ライト」がオフの位置になります。...しかし、マウス が消えたときにそのホバー 位置を削除（外に出す）する問題div id="menu"からWebサイトの他のdiv/位置へ...

テスト（および更新）できる完全なコードは次のとおりです：http：//jsfiddle.net/FEBkJ/

HTML：

<div id="menu" class="standout">
            <jdoc:include type="modules" name="menu" />
</div>
<div id="the_lights" style="display: block; opacity: 0; "></div>

CSS：

#menu{height:30px;width:960px;zoom:1;margin-top:5px;background:#C15F56;z-index:1001;}
#the_lights {opacity:0.5; background-color:#000; width:100%; height:100%; z-index:10; top:0; left:0; position:fixed; }
.standout {position: relative;z-index: 10000}​

脚本：

    jQuery(document).ready(function () {
        jQuery("#the_lights").fadeTo(1, 0);
        jQuery(".turnon").hide();

        jQuery("#menu").hover(function () {
            jQuery("#the_lights").css({ 'display': 'block' });
            jQuery("#the_lights").fadeTo("slow", 0.8);
            jQuery(".turnon").show();
            jQuery(".turnoff").hide();
        });          
    });​

私もここでいくつかの解決策をフォーラムで検索しました...しかしそれを見つけることができません...助けてくれてありがとう！Ptからよろしく！

4

1 に答える 1

0

私があなたを正しく理解していて、フィドルを見ると、div #the_lightsマウスを正しく離したときに不透明度0にフェードバックしたい#menuですか？

もしそうなら、あなたは.mouseenterそして`'.mouseleave'を使うことができます

jQuery("#menu").mouseenter(function () {
    jQuery("#the_lights").css({ 'display': 'block' });
    jQuery("#the_lights").fadeTo("slow", 0.8);
    jQuery(".turnon").show();
    jQuery(".turnoff").hide();
});

jQuery("#menu").mouseleave(function () {
    jQuery("#the_lights").css({ 'display': 'block' });
    jQuery("#the_lights").fadeTo("slow", 0);
    jQuery(".turnon").show();
    jQuery(".turnoff").hide();
});

または、を使用し.toggleて関数を1つに結合することもできます。

.turnonとクラスへの参照が見つからなかった.turnoffので、ページの別の部分にあると思います。

于 2012-05-24T13:34:16.923 に答える