Question

我想悬停在父母身上，孩子的孩子的 TEXT ONLY 也会变红。有可能吗？

<div id="row">o
    <div id="col" class="col">o o
        <div id="colChild" class="col-child">o o o Turn Me Red</div>
    </div>
</div>

CSS

#row {
    width: 300px;
    height:100px;
    border: 3px solid red;
}
#row:hover {
    background-color:pink
}
#col{
    padding:5px;
    border: 2px solid blue;
}
#colChild {
    padding:5px;
    border: 2px solid black;
}

http://jsfiddle.net/NHbn8/235/

脱离上下文信息 实际上这些是表的行，他们也会选择保持悬停状态（但现在不在上下文中）

Answer 1

在悬停父#row:hover > .col > .col-child{background:red;}

上使用此功能

Answer 2

http://jsfiddle.net/33mhdju6/

#row {
  width: 300px;
  height:100px;
  border: 3px solid red;
}
#row:hover #colChild{
  background-color:red
}

#row:hover {
  background-color:pink
}

#col{
  padding:5px;
  border: 2px solid blue;
}
  #colChild {
  padding:5px;
  border: 2px solid black;
}

Answer 3

试试这个

   #row:hover #colChild  {
        color:red;
    }

demo

Answer 4

检查this

#colChild:hover{
  background-color:red
}

Answer 5

我不确定这会有效，但我认为它会：

<div id="row">o
    <div id="col" class="col">o o
        <div id="colChild" class="col-child">o o o Turn Me Red</div>
    </div>
</div>

的CSS：

#colChild:hover {
    background-color:red;
}

DEMO

Answer 6

您可以使用css selectors属性将效果应用于任何partiticular div。 CSS选择器列表已在下面的链接中给出。 http://www.w3schools.com/cssref/css_selectors.asp

悬浮对父母孩子的影响

6 个答案: