jQuery的鼠標懸停不適用於內聯CSS

我想完成的是：當用戶懸停在INCREASE鏈接。紅色div的寬度應該增加。似乎不想工作。是因爲內聯css嗎？jQuery的鼠標懸停不適用於內聯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。我怎樣才能使懸停紅色增加？

來源

2014-01-24 Modelesq

哪裏是你的'＃popularity_bar'？ – Chad

你的CSS永遠不會匹配。 '＃bar'不是'＃increase_button'的子元素，但是你的css要求這樣做。另外，CSS不能用來「跨越」這樣的dom。它有純粹的父母/子女關係，不能做「附近」類型的匹配，甚至不能「改變祖先」。你需要爲此使用Javascript。 –

你的小提琴似乎很好。 – j08691

我建議使用純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%"); 
});

來源

2014-01-24 21:24:38

這是因爲您的選擇器錯了，您的元素的ID爲bar。

代碼：

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

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

來源

2014-01-24 21:22:45

jQuery的鼠標懸停不適用於內聯CSS

回答

相關問題