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