Question

所以，我尝试创建一个普通的菜单。
HTML：

    <ul>
        <li><a href="#">hompeage</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>

（在这种情况下需要灰色背景）。
添加到此菜单后，我尝试创建一个.each()函数，用于更改每个（a）标记的border-top-color和background。
DEMO

但是我遇到了一个问题 - 将菜单从底部移到顶部（或者如果你在全屏幕上从右到左），很快就会在其背景中标记整个其他（a）标签。

jQuery代码（即使它出现在JSBin演示中，我把它放在这里使它更舒服）：

var bgcolors = ['#000055', '#4c4c00', '#b27300', '#660000'];



var a = $("li a");


setInterval(function(){  
    a.each(function(index) {
    var current = $(this);
    current.css("border-top-color", bgcolors[index]);
        if($(this).is(":hover")) {
           $(this).css("background", bgcolors[index]);
        }
        else {
           $(this).css("background", "");
        }
    });
}, 200);

我是初学者，所以请不要消极，不喜欢我，我还在学习它。

谢谢你们。

编辑：更改了代码，不是正确的代码。

Edit2：已解决
已使用mouseenter()和mouseleave()个事件。这么简单。

var colors = ['#000055', '#4c4c00', '#b27300', '#660000'];

var a = $("li a");

a.each(
    function(index) {
        var current = $(this);
        current.css("border-top-color", colors[index]);
        $(this).mouseenter(
        function(){
            $(this).css("background", colors[index]);
        });
        $(this).mouseleave(
        function(){
            $(this).css("background", "");
        });
    }
);

Answer 1

您可以使用hover()来处理hover事件

＆＃13;

var bgcolors = ['#000055', '#4c4c00', '#b27300', '#660000'],
  colors = ['#b27300', '#660000', '#000055', '#4c4c00'];

$("li a").hover(
  function() {
    var current = $(this),
      index = $(this).parent().index();
    current.css({
      "background": bgcolors[index],
      "color": colors[index],
      "border-top-color": bgcolors[index]
    });
  },
  function() {
    var current = $(this),
      index = $(this).parent().index();
    current.css({
      "background": "",
      "color": "",
      "border-top-color": ""
    });
  }
);

＆＃13;

body {
  background: grey;
}
ul li {
  color: white;
  list-style: none;
  display: inline;
  padding-right: 130px;
}
li a {
  font-size: 150%;
  color: white;
  text-decoration: none;
  padding: 5px;
  border-top: 3px solid transparent;
  border-top-color: transparent;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">hompeage</a>
  </li>
  <li><a href="#">link</a>
  </li>
  <li><a href="#">link</a>
  </li>
  <li><a href="#">link</a>
  </li>
</ul>

＆＃13;

Answer 2

尝试使用css :nth-of-type()，:hover伪类

＆＃13;

body {
  background: grey;
}

ul li {
  color: white;
  list-style: none;
  display: inline;
  padding-right: 130px;
}

li a {
  font-size: 150%;
  color: white;
  text-decoration: none;
  padding: 5px;
  border-top: 3px solid transparent;
  border-top-color: transparent;
  display: inline-block;
}

ul li:nth-of-type(1) a:hover {
  border-top-color: #000055;
  background: #000055;
}

ul li:nth-of-type(2) a:hover {
  border-top-color: #4c4c00;
  background: #4c4c00;
}

ul li:nth-of-type(3) a:hover {
  border-top-color: #b27300;
  background: #b27300;
}

ul li:nth-of-type(4) a:hover {
  border-top-color: #660000;
  background: #660000;
}

＆＃13;

<ul>
  <li><a href="#">hompeage</a>
  </li>
  <li><a href="#">link</a>
  </li>
  <li><a href="#">link</a>
  </li>
  <li><a href="#">link</a>
  </li>
</ul>

＆＃13;

初学jQuery，后台不会改回

2 个答案: