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>

我已将第1张和第2张图片的样式分别指定为pointer和default。

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

第一张图片也是如此。当用户处于第二张图像时，当切换从第二张图像发生到第一张图像时，光标仍将默认为指针。因此，用户不知道第一张图像是可点击的。

Answer 1

尝试指针事件：无; css属性提到你想要的地方。

Answer 2

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

对于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>

之后，您可以在触发或点击图像时，根据自己的意愿轻松切换课程。

cursor：指针，默认不立即反映

2 个答案: