Разве текст не должен менять цвет после наведения «прямоугольника»?

~ является общим сочетанием братьев и сестер. .turn не является братом .box, поэтому стиль не применяется.

Вы можете использовать .box:hover.turn

Вы используете неправильный селектор:

Это сработает!

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

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

Также вы можете использовать:

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

если вы можете использовать прописку на.box, используйте это

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

~ Селектор CSS называется селектором Sibling.

Если ваша разметка (HTML) была такой:

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

то ваш CSS будет работать отлично, потому что в дереве DOM узел <p> является дочерним узлом узла <div>.

Дерево DOM для HTML:

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

Но в вашей разметке элемент <p> фактически является дочерним узлом <div>. И дерево DOM было бы:

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

Поэтому вы должны использовать дочерний селектор > поскольку <p> является прямым дочерним .box или вы можете просто оставить пробел между .box и .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/

попробуй это...

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

Нет... потому что ~ - селектор, но в вашем примере элемент .turn является дочерним .box

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