Change color of div when hovering over li

Question

I have a stack of li 's. I'm trying to get the background color of a div to change upon mouse on and change back upon mouse off. I was able to figure out how to do it, but it's buggy. The gaps between the li 's cause an issue where the jquery isn't triggered correctly when I hover from one li to another.

Here's my code: http://jsfiddle.net/blutuu/k93o28rf/8/

It's quite hacky, so I'm hoping for a better implementation. Thanks for your help.

Answer 1

I'm stacking on top of both answers above. I did a little rearranging of the code and I think I finally got what you are looking for. I tucked the <li> tag inside of the <a> tags, at which point the entire element even when a border is added became clicable.

 $(document).ready(function() { $('li').mouseenter(function() { var color = $(this).data('color'); $('#mbg').css('background-color', color); }); $('li').mouseout(function() { $('#mbg').css('background-color', 'blue'); }); }); 

 .resources { width: 17%; height: 100vh; overflow: hidden; position: absolute; z-index: 1; border-right: solid 1px #C5C5C5; box-shadow: 2px 0px 2px -1px #DCDCDC; } .resources ul { text-align: right; padding: 0; margin: auto 0; } .resources ul > li a { list-style-type: none; height: 65px; background: #00ADEF; border-bottom: solid #0088BC 1px; vertical-align: middle; overflow: hidden; padding: 0; box-shadow: 0px -1px 5px -2px #222 inset; box-sizing: border-box; transition: .5s; } .resources ul li a:hover { border-right: 25px solid #8CC63E; vertical-align: middle; overflow: hidden; /*transition: .5s;*/ } .resources li a { line-height: 1em; text-decoration: none; color: white; font-size: 20px; font-weight: bold; display: block; padding: 1.13em; } #mbg { position: absolute; background-color: blue; width: 100%; height: 100vh; margin-left: 17%; } #layoutsTable { border: solid 1px #f08721; height: 100vh; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="mbody"> <div class="resources"> <ul> <a href="#"> <li data-color="#380606">Policies</a> </li> <a href="#"> <li data-color="#191919">LMS</a> </li> <a href="#"> <li data-color="#cbcbcb">Tips & Tricks</a> </li> <li data-color="#f08721"><a href="#">Forms</a> </li> </ul> </div> <div id="mbg"></div> </div> 

Answer 2

Demo: http://jsfiddle.net/k93o28rf/6/

Use of bind to pass params directly to the changeColor function. Define a changeColor function so you don't have to define costly vars everytime. And simply call .css function on your div id to set background-color.

$(document).ready(function() {
    var content = $('#mbg');
    var changeColor = function(color) {
        content.css('background-color', color);
    }

    $('li').eq(0).hover(
        changeColor.bind(null, '#380606')
    );
    $('li').eq(1).hover(
        changeColor.bind(null, '#191919')
    );
    $('li').eq(2).hover(
        changeColor.bind(null, '#191919')
    );
    $('li').eq(3).hover(
        changeColor.bind(null, '#f08721')
    );
    $('li').mouseout(
        changeColor.bind(null, 'blue')
    );
});

Answer 3

demo: http://jsfiddle.net/k93o28rf/3/

by using data tag attributes on each of the li elements, you can just have one mouseenter function and one mouseout function to handle the background color changes as shown below.

<div id="mbody">
    <div class="resources">
        <ul>
            <li data-color="#380606"><a href="https://sussex.sharepoint.com/SitePages/Policies.aspx">Policies</a></li>
            <li data-color="#191919"><a href="https://sussex.sharepoint.com/SitePages/LMS.aspx">LMS</a></li>
            <li data-color="#cbcbcb"><a href="https://sussex.sharepoint.com/SitePages/Tips%20and%20Tricks.aspx">Tips & Tricks</a></li>
            <li data-color="#f08721"><a href="https://sussex.sharepoint.com/SitePages/Forms.aspx">Forms</a></li>
        </ul>
    </div>
    <div id="mbg"></div>
</div>

$(document).ready(function() {
    $('li').mouseenter(function() {         
        var color = $(this).data('color');
        $('#mbg').css('background-color', color);
    });
    $('li').mouseout(function() {
        $('#mbg').css('background-color', 'blue');
    });
});

Answer 4

UPDATE: Try using linear-gradient instead of border-right on your a elements:

http://jsfiddle.net/em96edb0/

The problem is the border you've applied to the bottom. Add this to your a element in CSS:

box-sizing:conteny-box;

And that should fix it. Also, to be more efficient, use JQuery's .each function. Something like this:

$('li').each( ///your code );