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>

我试图在li div上悬停时更改.content背景，其中包含以下内容：

$('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 {}

演示：

＆＃13;

.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\9;
    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;
}

＆＃13;

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

＆＃13;

更改先前UL的背景颜色

3 个答案: