标签: jquery-hover

想要改变盒子上的边框颜色..

..当用户将鼠标移出/移出时..

这是尝试过的代码..需要工作!

JQuery的:

<script>
$("result").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);
</script>

CSS3:

<style>
  .result {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result_hover {
    border: 1px solid #fff;
  }
</style>

HTML5:

<div class="result">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>&nbsp;##
    </div>
  </div>
<div>

谢谢你的期待

我创建了一个小提琴试图调试我遇到的问题,一旦我用jQuery重新排列html元素,那些元素上的悬停事件就不再起作用了.

但是,我在这里遇到了这个有趣的情况:http://jsfiddle.net/4yv1trj4/

我有一个主要div,一旦我将鼠标悬停在它上面就会改变颜色.

$("#block").hover(function() {
     $(this).css("backgroundColor", "red");
}, function() {
    $(this).css("backgroundColor", "#888");        
});

如果单击该按钮,主要divID将更改为block2:

$("#block").attr("id","block2");

但是$("#block").hover()当我盘旋时仍然会发射#block2.此外,所有悬停呼叫#block2都不起作用.是否有一个基本的原理,jQuery如何工作,这可以解释这个？

我有一个悬停功能,如果它是一个触摸设备,我希望悬停事件不会发生.问题是当您点击带有触摸设备的链接时,它会在执行点击事件之前执行悬停事件,因此您必须点击它两次才能使用它.

这是悬停功能:

$("#close").hover( 
    function () { 
        $("#close_2").css({
            display: "none"
        });
        $("#close_1").css({
            display: "block"
        });
    }, 
    function () {
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "block"
        });;
    }
); 

然后我将此设置为click功能:

$('#close').click(function() {
    var id = $(this).attr('id');
    $('#full_image').animate({
        height: 0
    }, 300, function() {
        $('#full_image img').attr('src','#');
    });
    $("#close_1").css({
        display: "none"
    });
    $("#close_2").css({
        display: "none"
    });
    $("#close").css({
        display: "none"
    });
});

我在检查IE8中div的状态时遇到问题.我想检查鼠标当前是否悬停在某些div上.目前在IE8中,我收到以下错误: Syntax error, unrecognized expression: hover.下面是导致错误的jQuery:

// This function will close the slideout of widgets
function CloseWidgetPanel()
{
    if (!$("#widgets").is(":hover") && !$(".widgetPanel").is(":hover"))
    {
        if ($("#widgets").is(":animated"))
        {
            $("#widgets").stop(true, true);
        }
        $("#widgets").hide("slide", { direction: "right" }, 300);
    }
    else
    {
        // We are currently hovering over a panel, so check back in 2 seconds.
        setTimeout(CloseWidgetPanel, 2000);
    }
}

我有一个复杂的问题.

这里有两个要素:

(1).选择时$(".steps li")我希望整体<li>改变颜色rgb(66, 81, 95).然后它必须改回原来的状态.

这部分我已经完成了,使用.data().

第二部分是棘手的部分:

(2).当我选择一个<a>相同<li>的颜色时,我希望颜色保持不变并使用下划线.因此,我希望"世界大会"文本保持绿色,加下划线,其余部分为<li>白色,灭活颜色.

有没有办法在悬停功能中使用回调来做到这一点？

我需要(1)和(2)同时工作.

我只是徘徊在$(".steps li a")上,但这不起作用,因为第一部分工作,必须删除该类.

无论如何,我不确定这一点.任何意见,将不胜感激.

代码如下:

CSS:

    html, body {
    background: #000;
    color: #e7e7e7;
    font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif;
    margin:0;
    padding:0;
}
a {
    color: rgb(66, 81, 95);
    text-decoration:none;
}
a:hover {
    /*color:#a0a0a0;*/
    text-decoration:none;
}
.wa a {
    color: rgb(68, 118, 67);
}
.steps {
    width:400px;
    margin:0 auto;
    text-align:left;
    line-height: 200%;
} …

我想用悬停功能更改按钮的背景图像y位置.是否有一种简单的方法来保持xpos,或者我应该首先获得位置,拆分它并再次使用$ .css().

如果有人悬停其中任何一个,我应该改变所有3跨度的背景位置.所以bt_first:悬停似乎不可用.

这是我的用法.我写了#should保持相同#来放置我不想改变xpos的值:

$('.bt_first,.bt_sec,.bt_third').hover(function(){
        $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -150px'})
},function(){
        $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -110px'});
});

这是我的html:

<div><a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a></div>

和css:

.bt_first,.bt_sec,.bt_third,.logout_t,.comments_t span {
    background: url('img/toolbar_bckrnd.png') no-repeat;
}
.bt_first {
    background-position: left -110px;
    display: inline-block;
    height: 24px;
    width: 15px;
}
.bt_sec {
    background-position: -149px -110px;
    display: inline-block;
    height: 24px;
    width: 2px;
}
.bt_third {
    background-position: right -110px;
    display: inline-block;
    height: 24px;
    padding: 0 10px;
}

我有主导航和子导航,出于设计原因,它们位于不同的DIV中.我希望在主要导航项目悬停时显示相应的子导航,我可以这样做,但是如果用户将鼠标移动到主导航项目之外并进入子导航,我还希望保持子导航打开-nav区域.最后一部分是我被卡住的地方.

我正在考虑悬停我需要用setTimeout()和IF语句做一些事情,但我无法在该领域取得任何进展.这甚至是一种值得尝试的方法吗？

HTML:

<div id="mnav">
 <ul id="buttons">
  <li class="one"><a href="#">Main 1</a></li>
  <li class="two"><a href="#">Main 2</a></li>
  <li class="three"><a href="#">Main 3</a></li>
  <li class="four nav-dark"><a href="#">Main 4</a></li>
 </ul>
</div> <!-- /mnav -->

<div id="snav">
 <ul class="snav-one">
    <li><a href="#">Sub 1.1</a></li>
    <li><a href="#">Sub 1.2</a></li>
    <li><a href="#">Sub 1.3</a></li>
    <li><a href="#">Sub 1.4</a></li>
    <li><a href="#">Sub 1.5</a></li>
    <li><a href="#">Sub 1.6</a></li>
 </ul>
 <ul class="snav-two">
    <li><a href="#">Sub 2.1</a></li>
    <li><a href="#">Sub 2.2</a></li>
 </ul>
</div> <!-- /snav -->

JS:

$(document).ready(function() {
 $("#buttons li.one, #buttons li.two").hover(function(){
  var subnav = 'ul.snav-' + $(this).attr('class');

  $("#snav").slideDown('fast').addClass("open").find(subnav).show();

 }, …

我正在使用jQuery在hover()上设置高度变化的动画.

在悬停时,它将应用.hover类,并在单击时,它将切换.expanded类.它主要是有效的,有适当的动画,但只是在第一次之后.第一次悬停将完全跳过动画.

我很难过 - 这是令人讨厌的代码:

$('#expandingbox').hover(

    /*on mouseenter, if not expanded, add hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).addClass("hover", "slow");
    }},

    /*on mouseout, if not expanded, remove hover class*/
    function() {
    if (!$(this).hasClass("expanded")) {
        $(this).stop(true, true).removeClass("hover", "slow");
    }
}).click(function() {
    $(this).toggleClass("expanded", "slow");
});

我找到了添加$('#expandingbox')的地方.触发器('mouseout')将解决这个问题,但它对我不起作用.这是一个重现问题的例子:http: //jsfiddle.net/Qc42v/

更新: 提交一张票,结果证明这是一个jQuery错误.相同的代码适用于jQuery 1.5(以及最新版本的jQuery UI).

我注意到我在我的网站上的控制台中收到以下错误.

错误:语法错误,无法识别的表达式:unsupported pseudo:hover @ /wp-includes/js/jquery/jquery.js?ver=1.8.3:2

我发现错误是由于我的一个js文件中的这一行:

if(qactive == 0 && !($('#slider').is(":hover"))) {

我可以用什么替代方法来写这条线以使错误消失？

我有一个隐藏的文本框,直到div悬停在上面.我正在使用Jquery的悬停功能,它的工作原理.但我想要的是在切换关闭之前延迟鼠标输出功能几秒钟.这是我的代码.

// Pops out TxtBox in Left Column When Hovered then collapses after delay
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").hover(function() {
    $(".CollapsedLeft .LeftColumn .SearchHoverCatcher").addClass("Hovered");
}, function() {
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").delay(1000).removeClass("Hovered");
});

上面的代码隐藏并显示所需的文本框,但不会发生1000毫秒的延迟.任何想法将不胜感激.

Jquery答案请.