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 Massali。现在我已经看到了您的请求，我已将代码更改为以下内容：

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

}

我希望我能帮上忙。我为延迟回复你而道歉。

如何获取鼠标所在元素的类名

3 个答案: