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

Question

我有一个textarea里面的div。与的textarea大小几乎相同，仅在其周围div留下一条窄条可见。div我想要实现的（最好仅使用 CSS）是div当鼠标光标在其上时具有更改的背景，但在textarea. 换句话说，如果鼠标光标位于divtextarea 周围可见条的顶部，我想要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 允许通过确定选择器语法的主题来实现这一点：

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