CSS hover rule needs to apply to parent only - html

Question

I have a simple textbox inside a div, and I want a hover rule to apply when hovering over the div but not the textbox.
Code:
<div id="div1" style="display:inline-block; border:1px solid #777777; padding:16px; background-color:#eeeeee;">
<input type="text" name="txt1" id="txt1" />
</div>
#div1:hover {
background-color:#ffffff !important;
cursor:pointer;
}
JSFiddle
When hovering over the textbox, the div's hover rule must not apply. Is there a way to do this without JavaScript?

Answer 1

Is this what you are looking for..? Please see the fiddle.
HTML
<div id="container" >
<div id="div1" style="">
</div>
<input type="text" name="txt1" id="txt1" />
</div>
CSS
#div1:hover{
background-color:red !important;
cursor:pointer;
}
#container{
position:absolute;
}
#div1{
position:absolute;
display:block;
border:1px solid #777777;
padding:16px;
width: 180px;
background-color:#eeeeee;
}
#txt1{
top:5px;
left:5px;
background-color:white !important;
position:absolute;
}
http://jsfiddle.net/8NRNQ/4/

Answer 2

Is this what you are looking for?
#div1 { display:inline-block;
border:1px solid #777777;
padding:16px;
background-color:#eeeeee;
}
#div1:hover {
background-color:red;
cursor:pointer;
}
Testing Fiddle: http://jsfiddle.net/8NRNQ/3/

Answer 3

I think you need one simple line of JS for that. The problem is, that you can't change the background of the containing div with hover over the input just by CSS. But in jQuery for example, this is pretty easy
$('#div1 input').hover(function(){$(this).parent.css(SET BACKGROUND AND CURSOR BACK TO THE NO-HOVER-STYLE)});

Answer 4

For anyone wondering, I ended up using JavaScript:
$('#div1').mouseover(function () {
var el = $(this).find('input');
if (!(el.hasClass('inputishover'))) {
$(this).addClass('divhover');
}
}).mouseout(function () {
$(this).removeClass('divhover');
});
$('#div1 input').mouseover(function () {
$(this).addClass('inputishover');
}).mouseout(function () {
$(this).removeClass('inputishover');
});
JSFiddle