cursor:指针,默认不立即反映 [英] cursor:pointer and default not reflecting immediately

查看:170
本文介绍了cursor:指针,默认不立即反映的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个横幅(图片),每4秒切换一次。一个图像是可点击的,另一个是不可点击的。下面是代码,

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


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

我已将第一和第二个图像的样式指定为指针默认



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



第一张图片也会发生同样的情况。当用户处于第二个图像中,并且当切换从第二个图像到第一个图像时,光标仍然是默认而不是指针。

解决方案

而不是使用内联样式,只需创建两个简单的类

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

对于HTML:

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


< div class =contentdiv>
< img src =imagePathwidth =590height =210border =0class =not_clickable/>
< / div>

之后,您可以根据自己的意愿轻松切换课程,而触发或点击图片。


I have two banners (images) which keep switching every 4 seconds. One image is clickable and the other is not. Below is the code,

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

I have specified style for 1st and 2nd image as pointer and default respectively.

When images switch, 1st image will appear as Pointer to user when he moves his cursor over the image. When a switch happens to 2nd image, and when user has not moved his cursor away from the image, 2nd image will also appear as Pointer instead of Default. Only when User clicks on 2nd image, it will change as Default and then User will come to know that 2nd image is not clickable.

Same thing happens with 1st image. When User is in 2nd image and when a Switch happens from 2nd image to 1st image, Cursor will still be default instead as Pointer. So, User doesn't know that 1st image is clickable.

解决方案

Instead of using inline style.,just create two simple classes for your cursor styles like as follows.

For CSS :

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

For 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>

After that you can easily switch over the classes as per your wish, while you triggering or clicking the image.

这篇关于cursor:指针,默认不立即反映的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆