jQuery鼠标悬停功能无法正常工作

时间:2014-06-13 05:31:41

标签: javascript jquery html css css3

悬停功能并不完美。这是my code,当鼠标放在Details *文本上时,整个div颜色变为黑色。但功能不正常。我希望每当鼠标放在细节文本上,然后它应该调用悬停功能,但现在它不能正常工作。有什么建议吗?

$('#disclaimer').hover(
        function () {
            $('#wrapper').addClass('hovered');
        }, function () {
            $('#wrapper').removeClass('hovered');
        }
    );

4 个答案:

答案 0 :(得分:3)

试试这个:

脚本:

$('#disclaimer').hover(
            function () {
                $('#wrapper').addClass('hover');
            }, function () {
                $('#wrapper').removeClass('hover');
            }
        );

风格:

.hover {
    display : block;
    background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn {    display: none; }
.hover #Image_logo {    display: none; }
.hover #headlineText {     display: none; }

小提琴:http://jsfiddle.net/U4EF8/7/

答案 1 :(得分:1)

  $("#searchput").hover(function() {
     $('#wrapper').addClass("hover");
}, function() {
     $('#wrapper').removeClass("hover");
});

答案 2 :(得分:1)

以下是代码:

$(document).ready(function(){
 $( "#disclaimer" )
 .mouseover(function() {
      $('#wrapper').addClass('hovered');
 })
.mouseout(function() {
   $('#wrapper').removeClass('hovered');
  });

 });

我的html是:

  <div id="wrapper"></div>
  <div id="disclaimer" style="border:1px solid black;">
    hello    
    </div> 

以下是工作示例:http://jsbin.com/heduqesu/2/edit,您可以在控制台中检查在鼠标输入和鼠标离开事件中添加和删除的类。希望这可以帮助 。干杯!

答案 3 :(得分:0)

你已经试过了吗?

$('#disclaimer').mouseenter(
    function () {
        $('#wrapper').addClass('hovered');
    }
);
$('#disclaimer').mouseleave(
    function () {
        $('#wrapper').removeClass('hovered');
    }
);

或使用纯css

#disclaimer:hover { 
     //put any attribute on "hovered" class here
}

或者我可能不太了解你的问题。