首页

关于

分享一个使用jQuery开发的圆形页面元素悬浮和点击触发教程

日期:2011/12/11  来源:GBin1

分享一个使用jQuery开发的圆形页面元素悬浮和点击触发教程

在线演示

对于一个元素使用一个:hover伪类的方式是一个典型方法来实现一个页面元素的悬浮效果。但是问题是使用border-radius来实现的悬浮并不是非常理想的方式来对一个圆形元素实现悬浮事件处理,因为你无法针对真正的可视圆形区域处理悬浮事件,而只能针对对应的外边框矩形区域实现悬浮。特别是当你设置border-radius为50%的时候。

今天我们这里将分享一个解决方式来针对圆形来实现悬浮效果。我们将开发一个插件来处理真正的圆形区域对应的'mouseenter','mouseout'和'click'事件而不是对应的矩形区域。

首先我们需要创建一个圆形。如下:

<a href="#" id="circle" class="ec-circle">
<h3>Hovered</h3>
</a>…

标签: jquery鼠标悬浮, jQuery圆形元素悬浮, jQuery悬浮处理插件, jQuery圆形, 圆形元素, border-radius, 悬浮点击, jquery圆图案悬浮

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.