Как можно получить имя класса элемента, что мышь над ним

Question

У меня есть меню следующим образом:

<div id="wrapper"><div class="lavalamp" dir="<%=Resources.Resource.Direction %>"><ul> 
    <li class="active"><asp:LinkButton ID="HomeBTN" runat="server" onclick="HomeBTN_Click" Text="<%$Resources:Resource, HomeArea %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="RegisterBTN" runat="server" onclick="RegisterBTN_Click" Text="<%$Resources:Resource, RegisterLBL %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="WorkReq" runat="server" onclick="WorkReqBTN_Click" Text="<%$Resources:Resource, WReq %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="EmployeeReq" runat="server" onclick="EmployeeReq_Click" Text="<%$Resources:Resource, EReq %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="RecManager" runat="server" onclick="RecManager_Click" Text="<%$Resources:Resource, RecManageLBL %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="News" runat="server" onclick="News_Click" Text="<%$Resources:Resource, News %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="ContactUsBTN" runat="server" onclick="ContactUsBTN_Click" Text="<%$Resources:Resource, ContactUsArea %>"></asp:LinkButton></li> 
    <li><asp:LinkButton ID="AboutUsBTN" runat="server" onclick="AboutUsBTN_Click" Text="<%$Resources:Resource, AboutUsArea %>"></asp:LinkButton></li> 
    <li><asp:HyperLink ID="HelpHPL" runat="server" Target="_blank" Text="<%$Resources:Resource, Help %>"></asp:HyperLink></li> 
</ul> 
<div class="floatr"></div></div></div> 

и у меня есть Jquery следующим образом:

$(document).ready(function() { 

var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left; 
var dwidth = $('.lavalamp li.active').width() + "px"; 



$('.floatr').css({ 
    "left": dleft + "px", 
    "width": dwidth 
}); 


$('li').hover(function() { 

    var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + Size); 
    var width = $(this).width() + "px"; 
    var sictranslate = "translate(" + left + "px, 0px)"; 

    $(this).parent('ul').next('div.floatr').css({ 
     "width": width, 
     "-webkit-transform": sictranslate, 
     "-moz-transform": sictranslate 
    }); 

}, 

function() { 

    var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + Size); 
    var width = $(this).siblings('li.active').width() + "px"; 

    var sictranslate = "translate(" + left + "px, 0px)"; 

    $(this).parent('ul').next('div.floatr').css({ 
     "width": width, 
     "-webkit-transform": sictranslate, 
     "-moz-transform": sictranslate 

    }); 

}) 

});

Я хочу, когда мышь над 'li', каждая 'li' установлена ​​с определенным фоном (с помощью верхнего JQuery).

Пожалуйста, помогите мне.

Прошу прощения за мою слабость на английском языке. Спасибо.

Answer 1

$('li').hover(function() { 

....... 
    $(this).attr('class'); 
}); 

.attr()

Answer 2

$.each($('li'), function() { 
    $(this).hover(
    $(this).css('background-color', 'red'), 
    $(this).css('background-color', 'white')) 
}); 

Answer 3

@Alireza Масаллы. Теперь я видел ваш запрос, и я изменил свой код на следующее:

<ul> 
    <li class="active"><asp:LinkButton ID="HomeBTN" runat="server" onclick="HomeBTN_Click" Text="<%$Resources:Resource, HomeArea %>"></asp:LinkButton></li> 
    <li class="li2"><asp:LinkButton ID="RegisterBTN" runat="server" onclick="RegisterBTN_Click" Text="<%$Resources:Resource, RegisterLBL %>"></asp:LinkButton></li> 
    <li class="li3"><asp:LinkButton ID="WorkReq" runat="server" onclick="WorkReqBTN_Click" Text="<%$Resources:Resource, WReq %>"></asp:LinkButton></li> 
    <li class="li4"><asp:LinkButton ID="EmployeeReq" runat="server" onclick="EmployeeReq_Click" Text="<%$Resources:Resource, EReq %>"></asp:LinkButton></li> 
    <li class="li5"><asp:LinkButton ID="RecManager" runat="server" onclick="RecManager_Click" Text="<%$Resources:Resource, RecManageLBL %>"></asp:LinkButton></li> 
    <li class="li6"><asp:LinkButton ID="News" runat="server" onclick="News_Click" Text="<%$Resources:Resource, News %>"></asp:LinkButton></li> 
    <li class="li7"><asp:LinkButton ID="ContactUsBTN" runat="server" onclick="ContactUsBTN_Click" Text="<%$Resources:Resource, ContactUsArea %>"></asp:LinkButton></li> 
    <li class="li8"><asp:LinkButton ID="AboutUsBTN" runat="server" onclick="AboutUsBTN_Click" Text="<%$Resources:Resource, AboutUsArea %>"></asp:LinkButton></li> 
    <li class="li9"><asp:HyperLink ID="HelpHPL" runat="server" Target="_blank" Text="<%$Resources:Resource, Help %>"></asp:HyperLink></li> 
</ul> 

$('li').hover(function() { 

    var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + Size); 
    var width = $(this).width() + "px"; 
    var sictranslate = "translate(" + left + "px, 0px)"; 

    var BackgroundColor = "Blue"; 
    if ($(this).attr('class') == "li2") { 
     BackgroundColor = "#d3d0b5"; 
    } 
    else if ($(this).attr('class') == "li3") { 
     BackgroundColor = "#eccb90"; 
    } 
    else if ($(this).attr('class') == "li4") { 
     BackgroundColor = "#fba884"; 
    } 
    else if ($(this).attr('class') == "li5") { 
     BackgroundColor = "#fdc0b6"; 
    } 
    else if ($(this).attr('class') == "li6") { 
     BackgroundColor = "#f66d62"; 
    } 
    else if ($(this).attr('class') == "li7") { 
     BackgroundColor = "#f897ab"; 
    } 
    else if ($(this).attr('class') == "li8") { 
     BackgroundColor = "#f9abcc"; 
    } 
    else if ($(this).attr('class') == "li9") { 
     BackgroundColor = "#f66bc0"; 
    } 
    else { 
     BackgroundColor = "#e0d99c"; 
    } 

    $(this).parent('ul').next('div.floatr').css({ 
     "width": width, 
     "-webkit-transform": sictranslate, 
     "-moz-transform": sictranslate, "background-color": BackgroundColor 
    }); 

} 

Надеюсь, я мог бы помочь. Я извиняюсь за задержку в ответе на вас.