鼠标移到鼠标移出后，改变背景颜色。

I have table which class is forum. My jquery code:

我有一张桌子，哪个班是论坛。我的jquery代码:

<script type="text/javascript">
    $(document).ready(function() {
        $('.forum').bind("mouseover", function(){
            var color  = $(this).css("background-color");

            $(this).css("background", "#380606");

            $(this).bind("mouseout", function(){
                $(this).css("background", color);
            })    
        })    
    })
</script>

It perfectly works, but is it possible to do it in more efficient way without var color = $(this).css("background-color");. Just after mouseout leave the previous background-color and remove #380606? Thank you.

它工作得很好，但是在没有var color = $(这个).css(“背景色”)的情况下，是否有可能以更有效的方式实现它?鼠标移出之前的背景色并删除#380606之后?谢谢你！

7 个解决方案

#1

If you don't care about IE ≤6, you could use pure CSS ...

如果你不在乎IE≤6中,您可以使用纯CSS……

.forum:hover { background-color: #380606; }

.forum { color: white; }
.forum:hover { background-color: #380606 !important; }
/* we use !important here to override specificity. see http://*.com/q/5805040/ */

#blue { background-color: blue; }

<meta charset=utf-8>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

With jQuery, usually it is better to create a specific class for this style:

使用jQuery，通常最好为这种风格创建一个特定的类:

.forum_hover { background-color: #380606; }

and then apply the class on mouseover, and remove it on mouseout.

然后在mouseover上应用类，然后在mouseout上删除类。

$('.forum').hover(function(){$(this).toggleClass('forum_hover');});

$(document).ready(function(){
  $('.forum').hover(function(){$(this).toggleClass('forum_hover');});
});

.forum_hover { background-color: #380606 !important; }

.forum { color: white; }
#blue { background-color: blue; }

<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

If you must not modify the class, you could save the original background color in .data():

如果不能修改类，可以将原始背景颜色保存在.data()中:

  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });

$(document).ready(function(){
  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });
});

.forum { color: white; }
#blue { background-color: blue; }

<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

或

  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );

$(document).ready(function(){
  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );    
});

.forum { color: white; }
#blue { background-color: blue; }

<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

#2

Set the original background-color in you CSS file:

在你的CSS文件中设置原始背景色:

.forum{
    background-color:#f0f;
}

You don't have to capture the original color in jQuery. Remember that jQuery will alter the style INLINE, so by setting the background-color to null you will get the same result.

您不必用jQuery捕获原始颜色。请记住，jQuery将在内联修改样式，因此通过将背景颜色设置为null，您将得到相同的结果。

$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});

#3

Try this , its working and simple

试试这个，它工作简单

HTML

<html>
<head></head>
<body>
    <div class="forum">
        test
    </div>
</body>
</html>

Javascript

$(document).ready(function() {
    var colorOrig=$(".forum").css('background-color');
    $(".forum").hover(
    function() {
        //mouse over
        $(this).css('background', '#ff0')
    }, function() {
        //mouse out
        $(this).css('background', colorOrig)
    });
});

css

.forum{
    background:#f0f;
}

live demo

现场演示

http://jsfiddle.net/caBzg/

#4

This should be set directly in the CSS.

这应该直接在CSS中设置。

.forum {background-color: #123456}
.forum:hover {background-color: #380606}

If you are worried about the fact the IE6 will not accept hover over elements which are not links, you can use the hover event of jQuery for compatibility.

如果您担心IE6不接受对非链接的元素进行悬停，可以使用jQuery的悬停事件来实现兼容性。

#5

HTML:

<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>

jQuery:

$('#id').hover(function(){
    $("#hiddenDiv").css('display','block');
  },
  function(){
    $("#hiddenDiv").css('display','none');
  }
);

#6

After lot of struggle finally got it working. ( Perfectly tested)

经过艰苦的努力终于使它奏效了。(完全测试)

The below example will also support the fact that color of already clicked button should not be changes

下面的示例还将支持这样一个事实，即已单击按钮的颜色不应该更改

JQuery Code

JQuery代码

var flag = 0; // Flag is to check if you are hovering on already clicked item

$("a").click(function() {
    $('a').removeClass("YourColorClass");
    $(this).addClass("YourColorClass");
    flag=1;
}); 

$("a").mouseover(function() {
    if ($(this).hasClass("YourColorClass")) {
        flag=1;
    }
    else{
        $(this).addClass("YourColorClass");
    };
});

$("a").mouseout(function() {
    if (flag == 0) {
        $(this).removeClass("YourColorClass");
    }
    else{
        flag = 0;
    }
});

#7

This is my solution :

这就是我的解决方案:

$(document).ready(function () {
  $( "td" ).on({
    "click": clicked,
    "mouseover": hovered,
    "mouseout": mouseout
});

var flag=0;

function hovered(){
  $(this).css("background", "#380606");
}

function mouseout(){
  if (flag == 0){
  $(this).css("background", "#ffffff");
} else {
  flag=0;
}
}

function clicked(){
  $(this).css("background","#000000");
  flag=1;
}
})

#1