Change the background color of a previous UL

Question

The following DIV is inside an update panel:

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

I am trying to change the li background when hovered over .content div with the following which isn't working:

$('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");
});

How can I change the background color.

Answer 1

One way to do it without jQuery is to add a container element (or use an existing one, which there may well be), and then change your existing a:hover selector to:

.container:hover .tabs a {}

Demo:

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

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