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: ```

``` 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 th…

Accepted Answer

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

div hover background color with textarea inside

Solution

Problem