javascript - 将鼠标悬停在 li 上时更改 div 的颜色

Question

我有一堆li。我正在尝试让 div 的背景颜色在鼠标打开时改变并在鼠标关闭时改变回来。我能够弄清楚如何去做，但它有问题。 li 之间的差距导致了一个问题，当我从一个 li 悬停到另一个时，jquery 没有正确触发。

这是我的代码:http://jsfiddle.net/blutuu/k93o28rf/8/

它很老套，所以我希望有一个更好的实现。感谢您的帮助。

Answer 1

我在上面的两个答案之上叠加。我对代码做了一些重新排列，我想我终于得到了你要找的东西。我把 <li> 藏起来了<a> 内的标签标签，此时整个元素即使添加了边框也变得可点击。

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