如何：在mouseOver / mouseOut上添加/删除类 – JQuery .hover？

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

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

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

JQuery的：

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

CSS3：

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

HTML5：

 
 
 
  ## 
 
 
 

谢谢你的期待

Answer 1

你忘记了结果类的类选择器的dot 。

现场演示

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

您可以在hover事件中使用toggleClass

现场演示

  $(".result").hover(function () { $(this).toggleClass("result_hover"); }); 

Answer 2

你可以使用：{in and out function callback}

 $(".result").hover(function () { $(this).toggleClass("result_hover"); }); 

对于您的示例，最好使用CSS伪类:hover ：{no js / jquery needed}

 .result { height: 72px; width: 100%; border: 1px solid #000; } .result:hover { background-color: #000; } 

Answer 3

你的选择器缺少了. 虽然你说你想改变border-color – 你正在添加和删除一个设置background-color

Answer 4

您缺少选择器上的点，并且您可以在jquery上使用toggleClass方法：

 $(".result").hover( function () { $(this).toggleClass("result_hover") } );