Question

i am fetching this data from database :

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

if (mysql_num_rows($res) > 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 "<div id='list_articles'>";
        echo "<a class='normal_link' href='view_article.php?id=".$article_id."'>".$article_name."</a>";
        echo "<span class='del' id='".$article_id."'>x</span>";
        echo "</div>";
    }

And i am using this code to hide the span with class del :

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

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

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

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 ??

thanks for help 🙂

Answer 1

echo "<div id='list_articles' class="listArticles">";

$(document).ready(function(){
    $('.listArticles').mouseenter(function(){
        $('span', this).show();
    }).mouseleave(function(){
        $('span', this).hide();
    });
});