jquery - 是否可以在不刷新页面的情况下更改元素上的光标？

Question

我有一个滚动幻灯片的轮播。轮播有一个覆盖层，其 z-index 高于其下方的内容。有些幻灯片包含链接，有些则没有。我的 jQuery 获取幻灯片链接的 href，并在单击时生成指向该 href 的覆盖链接。

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

我的问题是，我想在幻灯片包含链接时将光标更改为指针，在没有链接时将光标更改为自动。 (当用户将鼠标悬停在旋转木马上时，更改无关紧要，因为在这种情况下幻灯片不会自动移动)

我已经有一个点击功能，可以在没有链接时阻止叠加层链接到任何地方，但是光标当前由 CSS 控制。我尝试使用 addClass，但这不起作用。

是否真的可以仅使用 jQuery 和 CSS 更改同一 div 上的光标悬停状态？

如果没有链接，这是阻止覆盖层执行任何操作的函数:

$('#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');        
    }            
});

(我知道这是一个点击功能，如果我想让光标在悬停时改变，那将不起作用)

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

干杯

Answer 1

如果条件(本例中 href 为 != "")匹配，您可以将悬停脚本添加到叠加层并设置指向 over 的指针。

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

也许这不适用于复制和粘贴，因为我不知道您的 HTML。