CODEWITHSUNDEEP
jquerycsshover
DJ Howarth
DJ Howarth

Reputation: 582

Javascript Hover Cursor Pointer

Trying to use Jquery to do a Cursor Pointer on hover:

$('#example td').hover(function() {
$(this).css('cursor','pointer');
});

I do not want to put it in CSS, I want it in Jquery.

What do I need to do to fix this?

http://jsfiddle.net/Egttj/

Upvotes: 14

Views: 59782

Answers (3)

eQ19
eQ19

Reputation: 10701

Comparing the first method

$('#example tr').hover(function() {
    $(this).css('cursor','pointer');
});

With the second method

$('#example td').css('cursor', 'pointer');`

I would recommend to stick to the first since it can be extended to whatever jQuery we want like:

$('#example tr').hover(function() {

    $(this).css('cursor','pointer');

    $(this).click(function() {
       var href = $(this).find("a").attr("href");
       if(href) {
          window.location = href;
       }
    });

});

Upvotes: 1

Hans Vn
Hans Vn

Reputation: 844

It seems to work here after I cleared up your jquery, you forgot to close the first click function and the searchform and button aren't declared in your html (i changed it to #example tr)

Basically your jQuery wasn't that well coded (there also was a line with 5.}) on it that didn't belong there).

I also set the "your framework" to jQuery instead of the standard selected mooTools

This is the complete jQuery code I got after i deleted some unnecessary code:

$(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

    $('#example tr').hover(function() {
        $(this).css('cursor','pointer');
    });

});

Fiddle

Upvotes: 29

Paulo R.
Paulo R.

Reputation: 15609

I couldn't comment Tobias Nilsons's answer for some reason, so here it is as an answer.

$('#example td').css('cursor', 'pointer');`

There's no reason why'd you want specify the style as applied on hover anyway. The cursor really only appears on hover, so.

The fiddle: http://jsfiddle.net/Egttj/15/

I'm assuming simply specifying the corresponding rule in a stylesheet causes a little trouble for you. But, yes, as everyone pointed out, it would really be the best and simplest way to do it.

Upvotes: 9

Related Questions