CSS/JS解决方案:将鼠标悬停在子元素上时,更改父div
我知道CSS是级联"的,但是在这种情况下,我希望效果会提高.我可以使用JS或CSS解决方案,但老实说,我更希望使用最少的代码或开销的解决方案.
I know CSS is "cascading", but in this case I want the effect to ascend. I'm open for either a JS or CSS solution, but honestly I'd prefer the solution with the least amount of code or overhead.
当我将鼠标悬停在(子)字母上时,我希望整个窗口的背景颜色都发生变化,而不仅仅是子元素.每个字母都包含在整个窗口(或正文)的父级#word div中.
When I hover over a (child) letter, I want the entire background color to change for the ENTIRE WINDOW, not just the child element. Each letter is contained within the parent #word div which fills the whole window (or body).
如果CSS中存在以下内容,那就太好了
It would be nice if something like the below existed in css:
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
但是它不起作用.有人有什么想法吗?
But it's not working. Anyone have any ideas??
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;
}
}
解决方案可能是JS:
$(".letter").hover(function() {
$(this).closest("#word").toggleClass("hovered")
});
这是一个小提琴: http://jsfiddle.net/zT9AS/2