Is it possible to change the cursor on an element without refreshing the page?

I have a carousel scrolling through slides. The carousel has an overlay with a higher z-index than the content beneath it. Some slides contain links, some don't. My jQuery gets the href of the slides link and makes the overlay link to that href when clicked.

[Slide 1: <p>] [Slide 2: <p> <a>]

My开发者_运维技巧 problem is, I want to change the cursor to pointer when the slide contains a link and the cursor to auto when there is no link. (The change won't matter when the user is hovering over the carousel, because the slides don't automatically move when that is the case)

I already have a click function that stops the overlay from linking anywhere when there is no link, however the cursor is currently controlled by CSS. I tried using addClass, but this isn't working.

Is it actually possible to change the cursor hover state on the same div just using jQuery and CSS?

This is the piece of the function that stops the overlay from doing anything if there is no link:

$('#carousel_overlay').click(function() {
    slideLinkTarget = promoSlides.eq(activeSlideIndex).find('a').attr('href'); 
    if (!slideLinkTarget == '') {    
        window.open(slideLinkTarget); 
        ('#carousel_overlay').addClass('link');
    } else {
        return false;   
        $('#carousel_overlay').removeClass('link');        
    }            
});

(I know this is a click function and won't work if I want the cursor to change on hover)

#carousel_overlay{cursor: auto;}
#carousel_overlay.link{cursor: pointer;}

Cheers

You can add a hover script to your overlay and set the pointer for over if a condition (href is != "" in this example) matches.

$(function() {
   $('overlay').hover( function() {
      // the selector should match your link
      if ( $('image').attr('href') != "" ) {
         $(this).css('cursor', 'pointer');
      }
   },
   function() {
      $(this).css('cursor', 'default');
   });
});

Maybe this wont work with copy & paste, because i do not know your HTML.

I use something like

.clickable { cursor :pointer !important; }

and i use addclass to the element i want the pointer to be on then use removeClass to get it out.

your situation you could do something like (in your CSS)

.clickable a { cursor :pointer !important; }

and then use the jQuery to add that class to any element you need and it will make a pointer when over a tag