Question

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

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

Answer 1

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

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

将“white”替换为您需要的任何十六进制，rgb或颜色值。

Answer 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

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

如何仅突出显示父li文本：悬停？

2 个答案: