0

I have a menu as follows : 

<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>

and I have a Jquery as follows : 

$(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

    });

})

});

I want when mouse is over 'li', each 'li' set with specific background-color (with the help of top Jquery).

Please Help me.

I'm sorry for my weakness in English. Thank you.

4

3 回答 3

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

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

.attr()

于 2013-06-09T10:43:56.323 回答
0 
$.each($('li'), function () {
    $(this).hover(
    $(this).css('background-color', 'red'),
    $(this).css('background-color', 'white'))
});
于 2013-06-09T10:50:58.210 回答
0

@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
    });

}

我希望我能帮上忙。对于延迟回复您，我深表歉意。

于 2013-07-13T11:11:08.987 回答