如何仅在：hover 上突出显示父 li 文本？答案

【问题标题】：How to highlight parent li text only on :hover?如何仅在：hover 上突出显示父 li 文本？
【发布时间】：2010-05-22 00:54:33
【问题描述】：

如何仅在鼠标悬停时突出显示文章？当前，当我将鼠标悬停在文章上时，它也会突出显示所有子项目。是否可以仅突出显示文章

在此处查看示例http://jsbin.com/ubunu/2

<style>
  li:hover {background:red}
li li:hover {background:yellow}
</style>
</head>
<body>
  <p id="hello">Hello World</p>
  <ul>
<li>Weblog</li>
<li>Articles
   <ul>
   <li>How to Beat the Red Sox</li>
   <li>Pitching Past the 7th Inning
      <ul>
      <li>Part I</li>
      <li>Part II</li>
      </ul>
   </li>
   <li>Eighty-Five Years Isn't All That Long, Really</li>
   </ul>
</li>
<li>About</li>
</ul>

【问题讨论】：

对不起，这里是波士顿人。当你提到击败红袜队时，你失去了我。
@Robusto - 你是什么意思？？？
gear-solid：开个玩笑。但我们红袜队非常重视输赢。
@Robusto 哦！。我只是从一个站点复制了这段代码来举个例子。

标签： css xhtml

【解决方案1】：

您可能需要弄乱不同浏览器上的一些定位，但您可以将以下内容添加到您的样式中：

li:hover ul { background: white; }
li:hover ul li:hover { background: yellow; }

将“白色”替换为您需要的任何十六进制、RGB 或颜色值。

【讨论】：

+1 是的好主意。但是在那个 ul,li li:hover 中会显示直到我的鼠标是否在 ul 内的子项目上。但我认为这是 CSS 中最后一种可能的方式。
不，我的意思是我想一次只突出一个项目。

【解决方案2】：

如果您只想在鼠标悬停在单词上时突出显示“文章”，那么您需要编辑 HTML 以在每个单词周围添加一些 <span> 标签或类似的东西：

<style>
    li span:hover {background:red}
    li li span:hover {background:yellow}
</style>
</head>

<body>
    <p id="hello">Hello World</p>
    <ul>
        <li><span>Weblog</span></li>
        <li><span>Articles</span>
        <ul>
        ...etc

编辑：这看起来像一个菜单 - 在这种情况下，您将使用链接，因此您可以定位那些而不是使用跨度。

【讨论】：