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…

Here’s the full code that we can test it (and update): 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}​

Script:

    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

If I understand you correctly, and looking at the Fiddle, you want to the div #the_lights to fade back to 0 opacity when you mouse leaves #menu correct?

If so, you can use .mouseenter and `’.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();
});

Or you can use the .toggle to combine the function into one.

I couldn’t find any reference to the .turnon and .turnoff classes, so I assume they’ve on another part of the page.