Question

我想知道如何在使用CSS查看主要子类别时，如何突出显示我的主要父类别？

快速示例或教程将有助于感谢。

Answer 1

你的CSS会看起来像这样：

.highlighted, a:hover {
   /* styles for when the category is hovered or highlighted */
}

然后，在查看子类别时，您需要将“突出显示的”CSS类添加到表示父类别的元素中。具体取决于您的网站如何运作，但可以使用javascript或服务器端代码完成。

编辑1：是的，这可以通过CSS完成，但可能需要大量的手工操作。如果您的网站只是一堆静态HTML文件，您可以进入并编辑每个文件以突出显示父类。例如，在标题为“轿车”（汽车的子类别）的页面上，您可以更改

<div class="category">Cars</div>

到

<div class="category highlighted">Cars</div>

对你来说，应该没有什么令人惊讶或特别的。

Answer 2

您可以使用CSS play 1或CSS play 2中的代码。

每个示例都符合您的需求。主要思想是为基类使用伪类：

#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}

Answer 3

http://jsfiddle.net/axCPq/

CSS：

.main-parent:hover a.parent { color: green; }
.child-ul a:hover { color: green; }

HTML：

  <ul class="main-parent">
      <li><a class="parent" href="#">Link Parent</a>
         <ul class="child-ul">
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
            <li><a href="#">Link Child</a></li>
         </ul>
      </li>
  </ul>

CSS - 悬停问题

3 个答案: