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

【问题标题】：remembering last hovered li and default hovered li on page load在页面加载时记住上次悬停的 li 和默认悬停的 li
【发布时间】：2014-01-15 12:41:15
【问题描述】：

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

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

但这并不是所有的 id 也像第一个 li 在页面加载时默认悬停，当您将鼠标悬停在另一个 li 上时将变为非悬停。

因为 :hover 仅在您将鼠标悬停在不能使用 CSS 的对象上时才有效，所以我想这需要使用 Javascript 和类来完成。是否应该像 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;
}

【问题讨论】：

请包含您当前的代码
如果我是你，我会使用某种服务器端的东西来做到这一点。

标签： javascript html css hover html-lists

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

您回答了自己的问题。由于您希望它在页面加载时持续存在，因此您肯定必须使用 javascript 或类似的东西来写入 cookie 或会话。

【讨论】：