0

我有一组 div。当我悬停时它们需要是橄榄色的，并且在单击时它们需要保持红色（当单击红色 div 时它们需要变回白色）。当它们被点击时，我需要让 div 被“选中”（引入一个名为 selected 的新类）。

问题是一切正常，但是当我在点击后将鼠标悬停在 div 上时，悬停似乎仍然有效。这是我的代码

$(document).ready(function () {

    $("div.onemovie").not("select").hover(
  function () {
          $(this).css("background-color", "Olive");

  },
  function () {
          $(this).css("background-color", "White");
      }

  );
});

点击代码：

 $(document).ready(function () {
  $("div.onemovie").toggle(
  function () {
      $(this).toggleClass("select");
      $(this).css("background-color", "Red");
  },

  function () {
      $(this).toggleClass("select");
      $(this).css("background-color", "White");
  }
  );

});

这是我的情况的 JS Fiddle 链接：http: //jsfiddle.net/mNsfL/

4

3 回答 3

2

这个版本做你想要的吗？

http://jsfiddle.net/X7HbY/7/

我认为您可以通过使用 CSS 实现悬停效果更简单地完成您想要的事情。

此外，您不必将背景颜色设置回白色。当规则不再适用时，div将恢复到以前的设置。

于 2012-04-19T05:32:28.573 回答
1

我能看到的最好的方法是绑定每个事件并使其在 mouseover 事件期间，如果div单击，则 mouseout 事件将被解除绑定。

这将使鼠标悬停代码不执行，从而div保留颜色更改。

如果您使用的是 jQuery 1.7+，您应该使用on()来绑定事件并off()取消绑定它们。

于 2012-04-19T05:24:36.690 回答
1 
$("div.onemovie").bind('click', function(){
    $(this).css("background-color", "White");
})
.bind('mouseover', function() {
    $(this).css("background-color", "Red");
})

可以监听每个事件并分别处理它们。

于 2012-04-19T05:27:09.817 回答