Динамически изменять ширину HTML элемента с помощью JQuery

Question

Я пытаюсь изменить ширину li элемента при наведении курсора мыши с использованием JQuery

echo"<div id='film_container'><ul>"; 
while($row= mysql_fetch_array($result)) 
{ 
extract($row); 
echo"<a href='#'><li class='film_list'> <img class='poster' src='$poster_small'/>  
<span>$film_name</span></li></a>"; 
} 
echo"</ul></div>"; 

здесь JQuery

<script> 
$(document).ready(function(){ 
$('li .film_list').hover(function(){ 
$(this).css("width","180px"); 
}); 
}); 
</script> 

здесь метод JQuery CSS не работает кто-нибудь, любые предложения?

Answer 1

Удалить пространство между li и .film_list. Ваш селектор означает, что у вас есть элемент внутри вашего тега li, который содержит класс 'film_list' вместо самого li.

Answer 2

<script> 
$(document).ready(function(){ 
$('li.film_list').hover(function(){ 
$(this).css("width","180px"); 
}); 
}); 
</script> 

удалить пространство в селекторе