Question

HTML CODE

<div class="box">
<p class="turn">shou</p>
</div>

CSS代码

.turn {
    font-size: 50px;
    text-align:center;
    padding:150px;
    color: white;
}
.box {
    height:500px;
    width:500px;
    background-color: blue
}
.box:hover ~ .turn {
    color: red;
}

jsfiddle

所以，使用我的逻辑，将鼠标悬停在div“框”后，文本应该变为红色。我不太清楚为什么它不会发生。

Answer 1

您正在使用同级选择器~，但.turn是.box元素的子级。因此，您需要使用子选择器，即>。

.box:hover > .turn {
    color: red;
}

JsFiddle Demo

Answer 2

~是general sibling combinator。 .turn不是.box的兄弟，因此不会应用该样式。

您可以使用.box:hover .turn

Answer 3

您使用了错误的选择器：

这会有效！

.box:hover > .turn {
  color: red;
}

Answer 4

试试这个......

.box:hover .turn{
color:red;
}

Answer 5

    .box .turn:hover{
        color: red;
    }

你也可以使用：

.box p.turn:hover{
    color: red;
}

如果您可以在.box上使用填充，请使用此

.box:hover >p.turn{
    color: red;
}

Answer 6

~ CSS选择器称为Sibling Selector。

如果你的标记（HTML）是这样的：

<div class="box">
</div>
<p class="turn">shou</p>

然后你的CSS会完美地工作，因为在DOM树中，<p>节点是<div>节点的兄弟。

以上HTML的DOM树：

     <document-root>
            |
            |
     _______|_______
    |              |
  <div>           <p>

但是在您的标记中，<p>元素实际上是<div>的子节点。 DOM树将是：

     <document-root>
            |
            |
          <div>
            |
            |
           <p>

所以你应该使用child selector >，因为<p>是直接的孩子，或者你可以在.box和.turn之间留一个空格（这个是descendant selector）。

所以你的最终CSS应该是：

.turn {
    font-size: 50px;
    text-align:center;
    padding:150px;
    color: white;
}
.box {
    height:500px;
    width:500px;
    background-color: blue
}
.box:hover .turn {
    color: red;
}

更新了小提琴：http://jsfiddle.net/sH3Dh/7/

Answer 7

否...因为~是兄弟选择器，而在您的示例中，.turn元素是.box

的子元素

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

悬停“框”后文本不应该改变颜色吗？

7 个答案: