Question

I have a div which contains a list.

Its CSS:

#ResultsText  
{  
  color: #696969;
  text-align: right;
  vertical-align: top;
}

In the JS file:

$("li.ResultParagraph").mouseover(function () {
  $(this).addClass("ui-state-hover");
}).mouseout(function () {
  $(this).removeClass("ui-state-hover");
});

$('.ui-state-hover').css("font-weight", "normal");

but still I see the hover text in bold.
Any suggestions?

Answer 1

You should do like this(or switch “bold” with “normal”)

$("li.ResultParagraph").mouseover(function () {
    $(this).addClass("ui-state-hover").css("font-weight", "bold");
}).mouseout(function () {
    $(this).removeClass("ui-state-hover").css("font-weight", "normal");
});

DEMO