更改以前 UL 的背景颜色

Question

以下 DIV 在更新面板中：

<div style="overflow: hidden; float: left; width: 31%; padding: 1%;">
    <ul class="tabs">
        <li><a href="javascript:void(0);">STEP #2</a></li>
    </ul>
    <div class="content">
        <div style="display: block;">
            <h4>To update the profile for every provider once the SQL job has been executed</h4>
            <div style="overflow: hidden; clear: both; padding: 0 0 20px 0;">
                <button onclick="__doPostBack('ctl00$CPHB$btnUpdateAP','')" id="co_AP" type="button" class="btnAll btnUpdt">Update All Providers</button>
                <span id="lblUMsg"></span>
            </div>
        </div>
    </div>
</div>

我试图在鼠标悬停在 .content div 上时更改 li 背景，但以下内容不起作用：

$('body').on("mouseenter", ".content", function (e) {
    $(this).prevAll("li").css("background", "#FF0000");
});
$('body').on("mouseleave", ".content", function (e) {
    $(this).closest("ul li").css("background", "#FF0000");
});

如何更改背景颜色。

Answer 1

您需要使用prev()

$('body').on("mouseenter", ".content", function (e) {
    $(this).prev().find('li').css("background", "#FF0000");
});

或prevAll()格式如下

$('body').on("mouseleave", ".content", function (e) {
    $(this).prevAll("ul").first().find('li').css("background", "#FF0000");
});

Answer 2

如果您只想更改“.content”的前一个元素，为什么要针对正文？只针对您要更改的内容。

例子

   $(".content").hover(function(){
     $(this).css( "background-color", "#FF0000" );
    });

  $(".tabs li").hover(function(){
     $(this).css( "background-color", "#FF0000" );
    });

答案已修改！

Answer 3

不使用 jQuery 的一种方法是添加容器元素（或使用现有的容器元素，很可能有），然后将现有的 a:hover 选择器更改为：

.container:hover .tabs a {}

演示：

.tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tabs li {
    float: left;
    margin: 0 -15px 0 0;
}
.tabs a {
    float: left;
    position: relative;
    padding: 0 40px;
    height: 0;
    line-height: 30px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #3D3D3D;
    border-bottom-color: #777;
    opacity: .3;
    filter: alpha(opacity=30);
}
.container:hover .tabs a { /* This is the one I changed */
    border-bottom-color: #2ac7e1;
    opacity: 1;
    filter: alpha(opacity=100);
}
 .content {
    background: #CCC;
    border-top: 2px solid #00539B;
    padding: 2em;
    min-height: 115px;
}
.content h2, .content h3, .content h4, .content p {
    margin: 0 0 15px 0;
    color: #00539B;
}

<div class="container">
    <ul class="tabs">
        <li><a href="">Filter Options</a>
        </li>
    </ul>
    <div class="content">
     <h4>Filter by a provider name to update the individual profile</h4>
    </div>
</div>

更改以前 UL 的背景颜色

Change the background color of a previous UL

jquery

html

css

updatepanel