Question

我有两个横幅（图像），每隔4秒就会切换一次。一个图像是可点击的，另一个图像不是。以下是代码，

<div class="contentdiv"> 
  <h:commandLink  action="#{myBean.firstBannerClick}" id="firstBanner" style="text-decoration:none;">
  <img src="/firstImage.jpg" width="590" height="210"  border="0" class="clickable"/> 
  </h:commandLink> 
</div>

<div class="contentdiv"> 
    <img src="/secondImage.jpg" width="590" height="210"  border="0" class="notClickable"/> 
</div>

编辑：我也试过以下代码

$(function(){
    $('.clickable a').hover(function(){
        $(this).css({'cursor':'pointer'});
    },function(){
        $(this).css({'cursor':'default'});
    });
});

$(function(){
    $('.notClickable a').hover(function(){
        $(this).css({'cursor':'default'});
    },function(){
        $(this).css({'cursor':'default'});
    });
});

EDIT在此结束

以下是CSS使用的。

<style type="text/css">
.clickable
{
cursor: pointer;
}
.clickable a:hover
{
cursor: pointer;
}
.notClickable
{
cursor: default;
}
.notClickable a:HOVER
{
cursor: default;
}

.chrome .clickable
{
cursor: pointer;
}
.chrome .clickable a:hover
{
cursor: pointer;
}
.chrome .notClickable
{
cursor: default;
}
.chrome .notClickable a:HOVER
{
cursor: default;
}
</style>

当图像切换时，第一张图像将光标移动到图像上时将显示为指向用户的指针。当第二张图像发生切换时，并且当用户没有将光标移离图像时，第二张图像也将显示为指针而不是默认值。只有当用户将光标移动到第二个图像上时，它才会更改为默认值，然后用户才会知道第二个图像不可点击。

在FF上看不到此问题。然而，这在Chrome和IE中可见。

这个问题可以看作this one的延续。因为，现在问题是针对浏览器的，我把它作为一个新问题提出来了。

Answer 1

您可以像这样手动更改鼠标光标：

// Changes the cursor to an hourglass
function cursor_wait() {
    document.body.style.cursor = 'wait';
}

// Returns the cursor to the default pointer
function cursor_clear() {
    document.body.style.cursor = 'default';
}

使用Jquery触发悬停效果

1 个答案: