Question

我在div中有一个简单的文本框，我希望在将鼠标悬停在div上时应用悬停规则但不文本框。

代码：

<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

将鼠标悬停在文本框上时，div的悬停规则不能应用。有没有办法在没有JavaScript的情况下做到这一点？

Answer 1

这就是你要找的......？请看小提琴。

<强> 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

这是您要找的吗？

#div1 { display:inline-block;
border:1px solid #777777; 
padding:16px; 
background-color:#eeeeee;
}

#div1:hover {
    background-color:red;
    cursor:pointer;
}

测试小提琴：http://jsfiddle.net/8NRNQ/3/

Answer 3

我认为你需要一个简单的JS系列。问题是，您只能通过CSS将鼠标悬停在输入上，从而无法更改包含div的背景。但是在jQuery中，这很容易

$('#div1 input').hover(function(){$(this).parent.css(SET BACKGROUND AND CURSOR BACK TO THE NO-HOVER-STYLE)});

Answer 4

对于任何想知道的人，我最终都使用了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

CSS悬停规则只需要应用于父级

4 个答案: