Question

我有一堆li＆＃39; s。我试图让div的背景颜色在鼠标开启时改变，并在鼠标关闭时改回来。我能够弄清楚如何做到这一点，但它有问题。 li之间的差距导致了当我从一个li悬停到另一个{j}时未正确触发jquery的问题。

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

这很hacky，所以我希望有更好的实施。谢谢你的帮助。

Answer 1

我正在堆叠上面的两个答案。我做了一些代码重新排列，我想我终于得到了你想要的东西。我将Whatisyourname?标签隐藏在<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;
}

Answer 2

演示：http://jsfiddle.net/k93o28rf/6/

使用bind将params直接传递给changeColor函数。定义changeColor函数，这样您就不必每次都定义昂贵的变量。只需在div id上调用.css函数即可设置背景颜色。

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

演示：http://jsfiddle.net/k93o28rf/3/

在每个data元素上使用li标记属性，您只需拥有一个mouseenter函数和一个mouseout函数来处理背景颜色变化，如图所示下方。

<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

更新：尝试在元素上使用线性渐变而不是border-right：

http://jsfiddle.net/em96edb0/

问题是您已应用于底部的边框。将它添加到CSS中的元素：

box-sizing:conteny-box;

这应该解决它。另外，为了提高效率，请使用JQuery的.each函数。像这样：

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

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

4 个答案: