Question

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

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

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

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>

感谢您寻找

Answer 1

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

<强> Live Demo

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

您可以在toggleClass活动

上使用hover

<强> Live Demo

 $(".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")      
  }
);

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

4 个答案: