jQuery: hover div set link to visible

Question

Hi,

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.

Answer 2

You need quotes around the selector:

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

Answer 3

As others noted, you need to quote your selector.

Additionally, you can simplify your code a bit by using jQuery's .toggle() method:

$('.project-container').hover(function( e ) {
    $('.remove-project').toggle( e.type === 'mouseenter' );
});

The single function will get fired for both mouseenter and mouseleave, and toggle will show when e.type === "mouseenter", otherwise will hide.

Answer 4

Your selector needs quotes. If you use Firefox install Firebug. It has a nice console to debug. The javascript error should have print out in the console for the code you have. Also you should be quote attribute in html. Last since their are multiple links with 'remove-project' class you need to specify a context of your jquery selector. Here is the new code

$('.project-container').hover(function() {
    $('.remove-project', this).show();
},
function() {
    $('.remove-project', this).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 />';

    }
?>

Answer 5

I wouldn't use the show and hide methods because they're a bit slow (particularly if you're using a lot of animation on the page). Instead, I'd use a child selector so you're only working with that <div>'s link and add/remove a class of "hidden" that sets the display property to none.

So ...

$('.project-container').mouseenter(function() {
    $('.remove-project', this).removeClass('hidden');
}).mouseleave(function() {
    $('.remove-project', this).addClass('hidden');
});

When the mouse enters a <div>, the "hidden" class will be removed from that <div>'s link. When the mouse leaves, it will be re-added.