CSS - 悬停问题

我想知道如何使用CSS查看主父级子类别时如何保持我的主父级类别突出显示？CSS - 悬停问题

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

来源

2011-07-14 NET

请发表您的代码，以便能能够证明这个问题 –

我的html代码很长，发布很多neste d列表。 – NET

您至少应该告诉我们您使用什么样的工具/框架来生成您的网站，以便我们能够提供更具体和有用的答案。你只是用记事本编辑HTML文件或什么？你有多个文件或单个文件在用户点击按钮时发生变化？ –

对此，您可以使用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;}

来源

2011-07-14 07:18:44 VMAtm

我自己想通了，谢谢你的回答 – NET

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

应该有什么奇怪的或特别的是你。

来源

2011-07-14 07:01:08

是否可以用css来完成？ – NET

在答案中查看我的编辑1。 –

我想出了自己感谢您的答案。 – NET

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>

来源

2011-07-14 07:22:11 Joonas

CSS - 悬停问题

回答

相关问题