Мышь при наведении курсора мыши не работает

Question

$("document").ready(function () {
       $('#eventTarget').bind("mouseover", changeColor);//This doesnt work
       $('#eventTarget').bind("mouseleave", changeColor);//This doesnt work

       $('#eventTarget').bind("click", function(){   //This code works
              $('#eventTarget').unbind("mouseover", changeColor);
              $('#eventTarget').unbind("mouseleave", changeColor);
              $('#eventTarget').html("<p> click event handler Canceled</p>");
       }); 
    });
  function changeColor(evt) {
      $('#eventTarget').toggleClass("highlight");
    }

CSS:

.highlight
{
    background-color:Red
}
.normal
{ 
    background-color:Yellow

}

Тело HTML:

    <div id="eventTarget" class="normal">
    HardCoreProg...

* All activity
* Subscriptions
* Recommendations
</div>

Answer 1

Измените свой CSS-класс подсветки следующим образом:

.highlight
{
    background-color:Red !important;
}

В качестве бонуса используйте функцию hover, чтобы связать события mouseover и mouseleave одной строкой кода:

$('#eventTarget').hover(changeColor, changeColor);

Answer 2

Подождите, вам не нужно использовать !important только для того, чтобы убедиться, что определение стиля применено.Попробуйте добавить вес к вашему CSS-селектору, сделав его более конкретным - он будет делать то, что вы хотите сейчас, и вы все равно сможете переопределить его позже в своем файле CSS, если хотите.

#eventTarget.highlight {
    background-color: red;
}

.normal {
    background-color: yellow;
}

Для получения дополнительной информации о том, как работает специфика CSS, прочитайте эту статью в журнале Smashing Magazine: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Редактировать: Может быть, я должен был вместо этого ссылаться на документ W3C по специфичности?http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 3

JavaScript в порядке, ваша проблема в том, что CSS-классы highlight и normal борются друг с другом за контроль над background-color.Если вы форсируете проблему с помощью !important:

.highlight {
    background-color: Red !important
}

, тогда она работает нормально: http://jsfiddle.net/ambiguous/LQqgb/