div悬停背景颜色与内textarea
我有一个textarea
内div
。 textarea
与div
的尺寸几乎相同,只留下围绕其可见的div
的窄条。我想实现的是(最好只用CSS),当鼠标光标在上面时,div
的背景变化,但是当它在textarea
上时,不会变化。换句话说,如果鼠标光标周围的文本区域可见div
带的顶部,我想div
background color
改变,但如果是在textarea的本身,我不想顶部它改变div悬停背景颜色与内textarea
这里是说明该问题的的jsfiddle:
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
时,我不希望它变蓝。
在此先感谢。
选择器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, "");
});
+1对于使用纯JS,因为这个问题没有提到jQuery – 2013-04-25 07:46:44
\ o/read下次更好时间。 – 2013-04-25 07:47:53
@KeesSonnema - 请更具体。你觉得我错过了什么? – Quentin 2013-04-25 07:50:46
请尽量jQuery的 – hayat 2013-04-25 07:40:53
不可能CSS :(使用JavaScript当前实现变色onHover选项(用'event.stopPropagation()') – 2013-04-25 07:42:34
$(” ')。mouseover(function(){('this')。parent()。css('background-color','green'); }); – hayat 2013-04-25 07:43:06