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

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 9 年前。

Improve this question

我想要完成的是:当用户将鼠标悬停在“增加”链接上时。红色 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%");
});