jQuery mouseover не работает с встроенным CSS

То, что я пытаюсь выполнить, - это когда пользователь наводит курсор на ссылку INCREASE. Ширина красного div должна увеличиваться. Кажется, не хочет работать. Это из-за встроенного css?jQuery mouseover не работает с встроенным 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 на зависании?

источник

2014-01-24 Modelesq

Где ваш '# popularity_bar'? – Chad

Ваш CSS никогда не будет соответствовать. '# bar' НЕ является дочерним элементом' # enlarge_button', но ваш css требует, чтобы это было. Кроме того, CSS не может использоваться для «достижения» такого типа. Он имеет чисто родительские/дочерние отношения и не может выполнять совпадения типа «поблизости» или даже «изменять предка». Для этого вам нужно использовать 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

Это потому, что ваш селектор ошибочен, ваш элемент имеет идентификатор bar.

Код:

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

Демо: http://jsfiddle.net/IrvinDominin/J6fe5/4/

источник

2014-01-24 21:22:45

jQuery mouseover не работает с встроенным CSS

ответ

Смежные вопросы