Измените цвет фона при наведении курсора мыши и удалите его после мыши

У меня есть таблица, класс которой forum. Мой код 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>

Он отлично работает, но можно сделать это более эффективным способом без var color = $(this).css("background-color");. Сразу после mouseout оставьте предыдущий фоновый цвет и удалите #380606? Спасибо.

Ответ 1

Если вам неинтересно 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://stackoverflow.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>

Ответ 2

Установите исходный фоновый цвет в файле CSS:

.forum{
    background-color:#f0f;
}

Вам не нужно фиксировать исходный цвет в jQuery. Помните, что jQuery изменит стиль INLINE, поэтому, установив нужный фоновый цвет, вы получите тот же результат.

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

Ответ 3

Попробуйте это, его рабочий и простой

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

Это нужно установить непосредственно в CSS.

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

Если вас беспокоит тот факт, что IE6 не будет принимать наведение над элементами, которые не являются ссылками, вы можете использовать hover событие 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

После того, как много борьбы наконец-то заработало. (Отлично протестировано)

В приведенном ниже примере также будет подтвержден тот факт, что цвет уже нажатой кнопки не должен быть изменен

Код 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

Это мое решение:

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