div悬停背景颜色与内textarea

Question

我有一个textarea内div。 textarea与div的尺寸几乎相同，只留下围绕其可见的div的窄条。我想实现的是（最好只用CSS），当鼠标光标在上面时，div的背景变化，但是当它在textarea上时，不会变化。换句话说，如果鼠标光标周围的文本区域可见div带的顶部，我想divbackground color改变，但如果是在textarea的本身，我不想顶部它改变

这里是说明该问题的的jsfiddle：

http://jsfiddle.net/TS98t/

HTML：

<div class="mydiv"> 
    <textarea class="mytextarea"></textarea> 
</div> 

CSS：

.mydiv { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 

.mydiv:hover { 
    background-color: blue; 
} 

.mytextarea { 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    resize: none; 
    background-color: yellow; 
} 

div是绿色的textarea是黄色的。如果我将鼠标移到div上，它会变成蓝色。但是当鼠标移过textarea时，我不希望它变蓝。

在此先感谢。

Answer 1

选择器4级允许这种通过Determining the Subject of a Selector语法：

.mydiv { 
    background-color: green; 
} 

.mydiv:hover { 
    background-color: blue; 
} 

!.mydiv textarea:hover { 
    background-color: green; 
} 

...但是，这规范是当前一个非常早期的草案，我会感到惊讶，如果有它的任何浏览器支持在所有。

在此之前，您需要为此查找JavaScript。例如：

.mydiv.textarea_hover { 
    background-color: green; 
} 

和

var t = document.querySelector('textarea'); 
var d = t.parentNode; 
t.addEventListener('mouseover', function() { 
    d.className += " textarea_hover"; 
}); 
t.addEventListener('mouseout', function() { 
    d.className = d.className.replace(/ textarea_hover/g, ""); 
});