如何：在mouseOver / mouseOut上添加/删除类 - jQuery .hover？ [英] How to: Add/Remove Class on mouseOver/mouseOut - JQuery .hover?

问题描述

..当用户鼠标悬停/跳出时。

这是试图编写的代码..需要工作！

JQuery：

 <脚本> 
 $（this）.addClass（result_hover）; 
}，
 function（）{
 $（this） {
 $（this）.removeClass（result_hover）; 
} 
）; 
< / script> 
  

CSS3：

 <风格> 
 .result {
 height：72px; 
宽度：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> 
  

感谢您的期待

解决方案

您忘记了点 >类选择器的结果类。

实时演示

  $（。result）。hover（
 function （）{
 $（this）.addClass（result_hover）; 
}，
 function（）{
 $（this）.removeClass（result_hover）; 
} 
）; 
  

您可以使用 toggleClass on 悬停活动

实时演示

  $（。result）。hover（function（）{
 $（this）.toggleClass（result_hover）; 
}）; 
  

Looking to change the border color on a box..

..when the user mouses over/out..

Here's the attempted code.. Needs Work!

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>

Thanks for looking

解决方案

You forgot the dot of class selector of result class.

Live Demo

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

You can use toggleClass on hover event

Live Demo

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

这篇关于如何：在mouseOver / mouseOut上添加/删除类 - jQuery .hover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！