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, ""); 
});