标签: hover

我在使用jQuery悬停方法时遇到了一些麻烦.

这是相关的JavaScript代码:

$("#navigation > li > ul").hide();
$("#navigation > li").hover(
    function() {
        $(this).children("ul").slideDown(125);
    },
    function() {
        $(this).children("ul").slideUp(125);
    }
);

这是相应的HTML:

<ul id="navigation">
    <li><a href="#">Top Level Item #1</a></li>
    <li>
        <a href="#">Top Level Item #2</a>
        <ul>
            <li><a href="#">Sub-Menu Item #2-1</a></li>
            <li><a href="#">Sub-Menu Item #2-2</a></li>
            <li><a href="#">Sub-Menu Item #2-3</a></li>
        </ul>
    </li>
</ul>

每当您将鼠标悬停在顶级项目上时,其中的子菜单(如果有)将下拉,并具有漂亮,快速的幻灯片效果.问题是,当你快速将鼠标放置"到"菜单,让您的鼠标在菜单会是,但还没有达到:那么菜单将达到鼠标悬停动画的"结束",并反弹到隐藏状态,并重复,直到从下拉菜单中删除鼠标.

我有这样的代码:

<script type="text/javascript">
    var currentPicture;//default picture
    var picEL;//the image viewer element
    jQuery("#backImageShower").hover(
        function(i)
        {
            picEL = jQuery("#dynloadarxdock > img");
            currentPicture = picEL.attr("src");
            picEl.attr("src","back.jpg");
        },
        function()
        {
            picEl.attr("src",currentPicture);
        }
    );
</script>

但是,当我运行此代码时,它说picEl没有定义.我认为这可能是因为闭包但这段代码完美运行:

<script type="text/javascript">
    var currentPicture;//default picture
    jQuery("#backImageShower").hover(
        function(i)
        {
            currentPicture = jQuery("#dynloadarxdock > img").attr("src");
            jQuery("#dynloadarxdock > img").attr("src","back.jpg");
        },
        function()
        {
            jQuery("#dynloadarxdock > img").attr("src",currentPicture);
        }
    );
</script>

但是这个代码也包含全局变量,它可以工作.

有人可以告诉我为什么吗？

谢谢.

如何在我的鼠标图标的概述上绘制一个小蓝色方块,就像这样

试着做一些相当简单的事情,但它正在逃避我.我有以下HTML:

<div id="four">
                <div id="thumb1" class="suiting-thumb">
                    <img src="img/gallery/suit1-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb2" class="suiting-thumb">
                    <img src="img/gallery/suit2-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb3" class="suiting-thumb">
                    <img src="img/gallery/suit3-thumb.jpg" alt="" title="" />
                </div>
</div>

我想做的只是"暗淡"父母div的孩子,除了孩子被徘徊.我用这个jQuery片段成功地做到了这一点,但淡出/进入之间有一个短暂的延迟:

$('.suiting-thumb').hover(function() {
                var thumbBtnIdPrefix = 'thumb';
                var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
                $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').animate({
                    "opacity": .3
                }),200;             
            },
            function() {
                $('.suiting-thumb').animate({
                    "opacity": 1
            }),200;
        });

我觉得我需要通过用我的悬停声明选择#four来淡出父div的所有孩子,但我不太清楚如何做到这一点.任何帮助将非常感谢,谢谢!

我试图找出如何在悬停在一个div上时显示更多div.

我知道如何在悬停在同一个div上时显示相同div的变化但是当我将鼠标悬停在一个div上时如何显示更多div？

以此为例:

http://jsfiddle.net/j4LFD/

当你将鼠标悬停在方框上时,如何在旁边出现另一个方框？

我不确定这是用css还是需要javascript完成的？

谢谢!

詹姆士

当您将鼠标悬停在另一个div标签上时,是否可以更改div标签的属性？

例如,

#tag1 {

/* properties */
}
#tag1 a:hover {
/* new properties */
}


#tag2 {
/* contains a link */
}

其中tag1经历了更改,但tag2包含悬停发生位置的位置(或链接).

我已经尝试过但未能使其正常工作.基本上我试图得到它,以便当你将鼠标悬停在一个div上时,它应该将兄弟的不透明度改为0.5 class="receiver".

如果你看到这个的jsfiddle,有2个的div class="outerwrapper",都含有2周的div类hover和receiver.当您将鼠标悬停在带有类的div上时hover,receiver不透明度应设置为0.5,但只能设置为同一div(外部包装器)内的一个.

任何帮助将非常感激.提前致谢.

我有一个div,当我将鼠标悬停在它上面时,它内部的div会动画,然后当我停止徘徊时,它会动画回到原来的位置.但是如果我快速地将其悬停在它上面很多次,那么动画会排队并继续直到它们完成.示例:我很快快速地将div悬停在div上10次,而当我坐在那里时,div会动画10次.我不希望这些动画像这样排队.

这是我的脚本:

$(".call1").hover(
    function(){
        $(".call-label").animate({"bottom": "+=50px"}, "slow");
    },
    function(){
        $(".call-label").animate({"bottom": "-=50px"}, "slow");    
    }
);?

我有一个jsfiddle来说明我遇到的问题:http://jsfiddle.net/mqpbm/

我也尝试过.mouseover和.mouseout,以及.mouseenter和.mouseleave.所有人都这样做.

这是jQuery:

$(document).ready(function() {
    $('#box').click(function() {
        $(this).addClass('fullColor');
    });
});

这是CSS:

#box {
    width:200px;
    height:200px;
    background-color:blue;
    opacity:0.5;
}

.fullColor {
    opacity:1.0;
}

JSFiddle:http://jsfiddle.net/VPW6c/

如果我有以下带有自定义CSS类的HTML：

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}

<div class="custom_list_item">Test</div>

这样，当我将鼠标悬停在整个框上时，它会使文本变为红色。有没有办法确保仅当我将鼠标悬停在文本本身上时才会发生这种情况？