Question

我textarea内有div。 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, "");
});

div盘旋背景颜色与textarea里面

1 个答案: