Question

I have a that contains a link with class ‘remove-project’ that I want to default to hidden and set to visible when the div is hovered. So far I have this (which doesn’t work)

$('.project-container').hover(function() {
    $(.remove-project).show();
},
function() {
    $(.remove-project).hide();
});


<?php
    foreach($user['Project'] as $project)
    {
        echo '<div class=project-container>';
        echo $html->link($project['title'], array('controller' => 'projects', 'action' => 'view', $project['slug'])).' <small>Posted '.$time->niceShort($project['created']).'&nbsp;</small><a href=
        class=remove-project>Delete</a>';
        echo '<br />';
        echo strip_tags($text->truncate(
                $project['description'], 
                400,
                array(
                    'ending' => '...', 
                    'exact' => false,
                                            'html' => false
                )));

        echo '<br /><br />';
        echo '<b>Tags</b>: '.$project['tags'];
        echo '</div>';
        echo '<br /><br />';

    }
?>

I think I’m going wrong with

$(.remove-project).show();

Can someon help me out?

Answer 1

I think you need to do:

$('.remove-project').show();

(AKA, use quotes to perform the selection correctly). This is assuming, of course, that component is already in your HTML and is hidden.

Update: To ensure that the div tag is already in your HTML and hidden by default you can do:

<div class="remove-project" style="display:none;">

Of course, it is recommended that you don’t embed the style directly but apply a class to your div. But…this will work.