Question

好的，所以我有一个UL，每个li的背景颜色为蓝色，当你将鼠标悬停在li上时，它的背景颜色变为黄色。

这一切都适用于CSS，但我希望当鼠标不再悬停在li上时，最后悬停的li仍然悬停。

但是，并非所有id都像默认情况下的第一个li一样，当页面加载时会悬停，当你将鼠标悬停在另一个li上时，它将不会悬停。

因为：只有当你将鼠标悬停在一个不能使用CSS的对象上时，悬停才有效，所以我想它需要使用Javascript和Classes来完成。它应该像Javascript悬停按钮一样完成，第一个li有一个活动类，当你将鼠标悬停在另一个li上时会被删除吗？

HTML

<ul class="menu">
<a href="#">
  <li><p class="item-number">1</p><p class="item-name">Option 1</p></li></a>
<a href="#">
  <li><p class="item-number">2</p><p class="item-name">Option 2</p></li></a>
<a href="#">
  <li><p class="item-number">3</p><p class="item-name">Option 3</p></li></a>
<a href="#">
  <li><p class="item-number">4</p><p class="item-name">Option 4</p></li></a>
<a href="#">
  <li><p class="item-number">5</p><p class="item-name">Option 5</p></li></a>
</ul>

CSS

ul.menu li{
display:inline-block;
height:5vh;
width:80%;
background-color:#003399;
color:#FFF;
margin-bottom:2px;
}

ul.menu li:hover{
background-color:#fed928;
color:#003399;
}

Answer 1

你回答了自己的问题。由于您希望这可以在页面加载上持续存在，因此您必须使用javascript或某些内容来写入cookie或会话。

Answer 2

在javascript中，你可以使用JQuery和这段代码：

$("ul li").mouseover(function() {
    $(this).css("background-color", "#EEE").siblings("li").css("background-color", "");
});

对于代码中包含jquery，请使用：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

你的HTML代码中的

如果您需要记住下一页重新加载的最后一个悬停li，您可以使用Cookie并阅读this

记住上次悬停的李和默认悬停在页面加载的li

2 个答案: