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

Posted 2023-05-08

【中文标题】如何：在 mouseOver/mouseOut - JQuery .hover 上添加/删除类？

【英文标题】：How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?

【发布时间】：2013-05-25 03:59:44

【问题描述】：

希望更改框的边框颜色..

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

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

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>

感谢观看

【参考方案1】：

您忘记了结果类的class selector 的dot。

Live Demo

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

您可以在hover 事件中使用toggleClass

Live Demo

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

【参考方案2】：

你可以使用：in and out function callback

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

对于您的示例，最好使用 CSS 伪类 :hover：不需要 js/jquery

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

【参考方案3】：

您的选择器缺少 .，尽管您说要更改 border-color - 您正在添加和删除设置 background-color 的类

【参考方案4】：

你错过了选择器上的点，你可以在 jquery 上使用 toggleClass 方法：

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