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

Question

代码

<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 演示

Answer 2

~是一般的兄弟组合子。.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 选择器称为同级选择器。

如果您的标记 (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>

因此，您应该使用子选择器 >，因为<p>是直接子代，或者您可以简单地在.boxand之间留一个空格.turn（这是后代选择器）。

所以你最终的 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/