Question

I am using a joomla menu and i ve tryed to put 1 effect when the mouse it s hover the menu ("lights" go off position.... But the problem it s removing (get out) that hover position when mouse goes away from the div id="menu" to any other div / position in the website...

此处是我们可以测试(和更新)它的完整代码 : 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();
        });          
    });

I ve also searched here in the forum for some solution... but cant find it ... Thanks for any help! Best Regards from Pt!

Answer 1

如果我正确理解您, 并查看小道, 您想要在鼠标离开

如果是的话,您可以使用 .mouseenter 和`.mouse left

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 来将函数合并成一个函数。

我找不到任何引用 . turnon 和 . begnoff 类的引用,所以我假设它们在页面的另一部分有提及。

友情链接