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