CSS列表悬停子项目

我这里有一个小提琴http://jsfiddle.net/13v2fcjf/ 它有列表和子列表CSS列表悬停子项目

<ul> 
    <li>Item 1 
     <ul> 
      <li>Sub Item 1</li> 
      <li>Sub Item 2</li> 
      <li>Sub Item 3</li> 
     </ul> 
    </li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4 
     <ul> 
      <li>Child 1</li> 
      <li>Child 2</li> 
      <li>Child 3</li> 
     </ul> 
    </li> 
</ul>

而且我用下面的CSS一个基本的HTML文档 -

li:hover { 
    background: #f7f7f7; 
}

当我徘徊在包含子项目的li项目上，所有子项目也会突出显示。这是不可取的。我只想要用户悬停的列表项突出显示。我怎样才能做到这一点？

此外，我尝试使用:not选择器，但它不起作用。

来源

2015-02-11 Snork S

溶液依赖于恰好所需的行为。这是一种正常的行为，因为您没有为嵌套li的背景颜色指定背景颜色，然后透明，所以您会看到父级的背景颜色。 – 2015-02-11 16:00:42

你为什么不使用类？而不是在一个或span标签中包装的东西，我会为子元素定义类。看看：http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element和http://jsfiddle.net/k3Zdt/8/ – fortiZ 2015-02-11 16:15:57

我想你只需要在嵌套的<ul>标签上设置background。事情是这样的：

li:hover > ul { 
    background: #fff; 
}

编辑：这是假设你只希望父<li>强调，这是@ j08691在评论中指出的，可能不是你完全追求的。如果你希望每个<li>加以强调，您可能需要稍微修改您的HTML，以使它更容易些：

<ul> 
    <li><a>Item 1</a> 
     <ul> 
      <li><a>Sub Item 1</a></li> 
      <li><a>Sub Item 2</a></li> 
      <li><a>Sub Item 3</a></li> 
     </ul> 
    </li> 
    <li><a>Item 2</a></li> 
    <li><a>Item 3</a></li> 
    <li><a>Item 4</a> 
     <ul> 
      <li><a>Child 1</a></li> 
      <li><a>Child 2</a></li> 
      <li><a>Child 3</a></li> 
     </ul> 
    </li> 
</ul>

通过包装项目和分项在另一个标签 - 在这里我只是使用了<a>标签为参数的缘故 - 你可以针对该标签上:hover加以强调没有嵌套标签以同样的方式被影响，因为在原始代码：

a { 
    display: inline-block; 
    padding: 4px; 
} 
a:hover { 
    background: #f7f7f7; 
    cursor: pointer; 
}

见http://jsfiddle.net/13v2fcjf/3/

来源

2015-02-11 15:57:25

这个工作，但它保持父列表项高亮显示，我不确定OP想要什么。 – j08691 2015-02-11 15:58:47

是的，它保持父列表项高亮显示。我只想要一个列表项目一次突出显示 – 2015-02-11 16:05:43

如果伊恩的选项不为你工作，第二opotion是包裹<li>内容跨度和悬停适用于像this example fiddle：

HTML：

<ul> 
    <li><span>Item 1</span> 
     <ul> 
      <li><span>Sub Item 1</span></li> 
      <li><span>Sub Item 2</span></li> 
      <li><span>Sub Item 3</span></li> 
     </ul> 
    </li> 
    ....

CSS

因为个子项目的主要项目内

li span:hover { 
    background: #f7f7f7; 
    cursor: pointer; 
}

HTH， -Ted

来源

2015-02-11 16:05:51 Ted

这种效果是很自然的。

有迹象表明，我想起两个选项：

1）复位子列表的背景颜色与

li:hover > ul { 
    background-color: white; 
}

2.使用li项目作为一个容器）：

<li><span class="highlighted">Item</span></li> 

.highlighted:hover { 
    background-color: red; 
}

来源

2015-02-11 16:07:39 lupz

这是一个挑战，但下面的CSS与你现有的标记一起工作。它仅突出显示li，但未突出显示其父项。

主要技巧是让CSS悬停在嵌套的li上时创建新内容。为此，您可以使用:before伪元素：

li li:hover:before { 
    content: ''; 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; 
    z-index: -1; 
    background: white; 
}

（如果您只定位CSS3的浏览器，你可以使用::before代替:before。）

这将导致一个嵌套li掩盖其父li。负z-索引可防止背景覆盖任何文字。

家长li的需要与z-index的相对位置，以及嵌套li的需要为这个静态定位的工作：

li { 
    position: relative; 
    z-index: 0; 
} 

li li { 
    position: static; 
}

另一个伎俩已在其他帖子提到：

li:hover ul { 
    background: white; 
}

全部CSS：

li { 
    line-height: 1.65em; 
    cursor: pointer; 
} 

li { 
    position: relative; 
    z-index: 0; 
} 

li li { 
    position: static; 
} 

li:hover { 
    background: #def; 
} 

li:hover ul { 
    background: white; 
} 

li li:hover:before { 
    content: ''; 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; 
    z-index: -1; 
    background: white; 
}

Working fiddle

来源

2015-02-11 20:43:12

CSS列表悬停子项目

回答

相关问题