光标：指针和默认值不会立即反映

Question

我有两个横幅（图像），每 4 秒切换一次。一张图片可点击，另一张不可点击。下面是代码，

<div class="contentdiv">
   <h:commandLink  action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
       <img src="imagePath" width="590" height="210"  border="0" style="cursor: pointer;"/> 
</h:commandLink>
</div>


<div class="contentdiv">
    <img src="imagePath" width="590" height="210"  border="0" style="cursor: default;"/>
</div>

我将第一张和第二张图片的样式分别指定为pointer 和default。

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

第一张图片也会发生同样的事情。当用户在第二张图像中并且从第二张图像切换到第一张图像时，光标仍将默认为指针。所以，用户不知道第一张图片是可点击的。

Answer 1

不要使用内联样式，只需为光标样式创建两个简单的类，如下所示。

对于 CSS：

<style type="text/css">
.clickable {
cursor:pointer;
}
.not_clickable{
cursor:default;
}
</style>

对于 HTML：

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


<div class="contentdiv">
    <img src="imagePath" width="590" height="210"  border="0" class="not_clickable"/>
</div>

之后，您可以在触发或单击图像时根据需要轻松切换类。

Answer 2

尝试指针事件：无； css 属性可以随心所欲地提及。