div悬停背景颜色，里面有textarea

Question

我在div 中有一个textarea。 textarea 与div 的大小几乎相同，仅在其周围留下一条窄条div 可见。我想要实现的（最好仅使用 CSS）是当鼠标光标在其上时，div 的背景会发生变化，但在 textarea 上方时不会发生变化。换句话说，如果鼠标光标位于 textarea 周围可见的 div 条的顶部，我希望 div background 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, "");
});