将类更改为悬停类

Question

我有几个嵌套的div，并为其中一个内部div设置了一个CSS类。当用户悬停外部div时，如何设置类的悬停版本（class.hover），但不一定要在内部div的区域上。

我假设必须通过JavaScript完成。我需要一些输入。

由于

Answer 1

使用CSS :hover伪类。像这样：

div.outer-div:hover > div.child-div { /* styles! */}

以下是对spec。

的引用

Answer 2

如果我已正确理解您的问题，您可以使用纯CSS：

<强> CSS：

.outer:hover .inner
{
   // Your hover style here
}

<强> HTML：

<div class="outer">
   <div class="inner">Button text</div>
</div>

Answer 3

试试这个：

CSS：

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

HTML：

<div class="hoverDiv">
    <div>This is the inner div </div>
</div>

该示例将背景颜色更改为红色，但您可以将其更改为您想要的任何颜色。

Answer 4

除非我误解了这个问题，否则你问如何让父母继承其孩子的悬停行为？如果这是问题，那么无法通过CSS完成，至少不能直接完成。样式继承在文档树中向下，而不是向上。

一种可能的解决方法是（例如通过JQuery ready（）函数）将悬停样式添加到任何具有悬停样式的子项。但这会混淆后来的开发人员真正发生的事情。一个更清晰的设计方法就是简单地向父母提供悬停类（并因此悬停行为），就像其他一些回复显示一样。

希望有所帮助。