Question

我想要完成的是：当用户将鼠标悬停在INCREASE链接上时。红色div的宽度应该增加。似乎不想工作。是因为内联css吗？

这是我的代码：

$("#increase_button").mouseover(function(){
    $("#bar").css("width", "50%");
});

HTML

<div style="width: 30%; height: 10px; border: 1px solid #AAA; margin-top: 12px; margin-right: 15px;">
    <div id="bar" style="width: 20%;background-color:red;height:100%; margin-bottom: 15px;"></div>
</div>
<br>
<a href="" id="increase_button"> INCREASE </a>

我甚至尝试过css：

#increase_button:hover #bar{
  width: 50%;
}

这是fiddle。如何在悬停时使红色div增加？

Answer 1

我建议将纯CSS用于这样的简单hover事件。将a元素设置为前一个兄弟元素，以便使用相邻的兄弟组合器+，然后删除#bar上的内联样式 - 这会导致特定问题冲突。

EXAMPLE HERE

#bar {
    width: 20%;
    background-color:red;
    height:100%;
    margin-bottom: 15px;
    transition:all 2s;
    -webkit-transition:all 2s;
    -moz-transition:all 2s;
}
#increase_button:hover + div #bar {
    width: 50%;
}

如果你坚持使用jQuery：

EXAMPLE HERE

$("#increase_button").mouseover(function(){
    $("#bar").css("width", "50%");
}).mouseleave(function () {     
    $("#bar").css("width", "20%");
});

Answer 2

这是因为您的选择器错误，您的元素标识为bar。

代码：

$("#increase_button").mouseover(function(){
    $("#bar").css("width", "50%");
});

演示：http://jsfiddle.net/IrvinDominin/J6fe5/4/

jQuery鼠标悬停不适用于内联CSS

2 个答案: