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

我使用类似

的东西

.clickable { cursor :pointer !important; }

我使用addclass到我希望指针打开的元素然后使用removeClass来解决它。

你的情况你可以做（像你的CSS）

.clickable a { cursor :pointer !important; }

然后使用jQuery将该类添加到您需要的任何元素中，它将在标记上方生成指针

Answer 2

如果条件（在此示例中为href为！=“”）匹配，您可以将悬停脚本添加到叠加层并将指针设置为。

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

也许这不适用于copy＆amp;粘贴，因为我不知道您的HTML。

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

2 个答案: