div hover background color with textarea inside

Question

I have a textarea inside a div. The textarea is almost the same as the size of the div, leaving only a narrow strip of the div around it visible. What I want to achieve ( preferrably with CSS only) is have the background of the div change when the mouse cursor is on it, but not when it is over the textarea. In other words, if the mouse cursor is on top of the visible div strip around the textarea, I want the div background color to change, but if it is on top of the textarea itself I do not want it to change

Here is a jsfiddle that illustrates the problem:

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;
}

The div is green the textarea is yellow. If i move the mouse over the div it becomes blue. But I don't want it to become blue when the mouse is over the textarea.

Thanks in advance.

Answer 1

Selectors Level 4 allows this via the Determining the Subject of a Selector syntax:

.mydiv {
    background-color: green;
}

.mydiv:hover {
    background-color: blue;
}

!.mydiv textarea:hover {
    background-color: green;
}

… but that specification is currently a very early draft and I'd be surprised if there was any browser support for it at all.

Until that, you will need to look to JavaScript for this. For example:

.mydiv.textarea_hover {
  background-color: green;
}

and

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