javascript - CSS/JS 解决方案 : On hover of child element, 更改父 div

Question

我知道 CSS 是“级联”的，但在这种情况下我希望效果提升。我对 JS 或 CSS 解决方案持开放态度，但老实说，我更喜欢代码量或开销最少的解决方案。

当我将鼠标悬停在一个(子)字母上时，我希望整个窗口的整个背景颜色都发生变化，而不仅仅是子元素。每个字母都包含在填充整个窗口(或正文)的父 #word div 中。

如果 css 中有类似下面的东西就好了:

#h:hover #word{
    background-color: rgba(0, 102, 0, .5);
}

但它不起作用。有人有什么想法吗？？

HTML:

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a class= "letter" href=#>E</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>O</a></h1>
</div>

CSS:

    body {
        /*font-family: 'Sigmar One', cursive;*/
        font-family: 'Chango', cursive;
        font-size: 115px;
        color: white;
        text-shadow: 5px 5px 5px #000;
        /* background-color: #0047b2 */
        width: 100%;
        height: 100%;
        margin: 0px;
        background: url(img/texture.png) repeat; 

    }

    #word {
        position:absolute; 
        height:100%; 
        width: 70%;
        display: table;
        padding: 0 15% 0 15%;
        background: rgba(0, 71, 178, .5);
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        height: 1em;

    }

    a {
        /*border: 1px solid black;*/
        display: inline-block;
        line-height: 100%;
        overflow: hidden;

    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
        /*color: #E8E8E8;*/

    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;

    }

    a:hover {
        text-shadow: 5px 5px 5px #000;
        color: white;
    }

    #h:hover #word{
        background-color: rgba(0, 102, 0, .5);
    }

    @media (max-width: 1330px){
        #word {
            width: 100%;
            padding: 0px;

        }
    }

fiddle : http://jsfiddle.net/SZ9ku/1/

Answer 1

解决方案可能是 JS:

$(".letter").hover(function() {
    $(this).closest("#word").toggleClass("hovered")
});

这是一个 fiddle :http://jsfiddle.net/zT9AS/2