mouseenter and mouseleave only works with the first element
<p>i am fetching this data from database :</p>

<pre><code>$sql = "SELECT * FROM articles WHERE uid='".$uid."'";
$res = mysql_query($sql) or die (mysql_error());

if (mysql_num_rows($res) &gt; 0) {

    while ($row = mysql_fetch_assoc($res)) {
        $article_id = $row['id'];
        $author = $row['author'];
        $article_name = $row['article_name'];
        $num_views = $row['num_views'];
        $rate = $row['rate'];
        $times_rated = $row['times_rated'];
        $edit_time = $row['edit_time'];
        echo "&lt;div id='list_articles'&gt;";
        echo "&lt;a class='normal_link' href='view_article.php?id=".$article_id."'&gt;".$article_name."&lt;/a&gt;";
        echo "&lt;span class='del' id='".$article_id."'&gt;x&lt;/span&gt;";
        echo "&lt;/div&gt;";
    }
</code></pre>

<p>And i am using this code to hide the span with class del :</p>

<pre><code>.del {
    float:right;
    width:10px;
    text-align:center;
    color:#3B581E;
    border:1px solid #3B581E;
    display:none;
}
</code></pre>

<p>What i am trying to do is to view the spad with class "del" whenever i <code>mouseenter</code> the div with id  <code>list_articles</code> and to hide the same span whenever i <code>mouseleave</code> the div , I am using this jquery code for that :</p>

<pre><code>$(document).ready(function(){
    $('#list_articles').mouseenter(function(){
        $('span', this).show();
    }).mouseleave(function(){
        $('span', this).hide();
    });
});
</code></pre>

<p>The effect seems to work but only with the first result on my page and does not work with the rest of the divs below , Any idea ??</p>

<p>thanks for help :)</p>
