0

我正在使用 joomla 菜单，当鼠标悬停在菜单上时，我尝试设置 1 个效果（“灯”熄灭位置....但是当鼠标 消失时，它正在移除（退出）悬停 位置的问题从 div id="menu" 到网站中的任何其他 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();
        });          
    });​

我也在论坛中搜索了一些解决方案......但找不到它......感谢您的帮助！来自铂的最诚挚的问候！

4

1 回答 1

0

如果我对您的理解正确，并且看着 Fiddle，您想在鼠标离开正确div #the_lights时将其淡化回 0 不透明度？#menu

如果是这样，您可以使用.mouseenterand `'.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将功能合二为一。

我找不到对.turnon和.turnoff类的任何引用，所以我假设它们在页面的另一部分。

于 2012-05-24T13:34:16.923 回答