jQuery中使用mouseleave代替mouseout

Steve Luo — Sun, 07 Mar 2010 10:09:08 +0000

今天在写一个鼠标悬停下拉菜单过程中，遇到一个很抓狂的问题。既然是鼠标悬停效果，那就用到了jQuery的2个事件，mouseover和mouseout（在jQuery 1.3的API手册中只有这两个鼠标移入移出事件）。

先看下使用mouseout的效果：

Tips:您可以在运行代码前对其进行修改！

我们发现使用mouseout时，鼠标只要在容器里一移动，就被出发了hide()，其实是因为mouseout事件也会影响到子元素，也就是事件可能被同时绑定到了该容器的子元素上，所以鼠标移出每个子元素也都会触发我们的hide()。

经过网上一番调研~从jQuery 1.3开始新增了2个mouse事件，mouseenter和mouseleave。现在我们使用mouseleave事件，这个事件在jQuery手册上好像并没有提到…囧
我们来看一下mouseleave事件是否能够解决这个问题。

Tips:您可以在运行代码前对其进行修改！

好了，我们的问题解决了，需要的朋友各取所需吧。

本文参考了jquery中解决div mouseout事件冒泡的问题

CSS透明度在各浏览器下的兼容实现

Steve Luo — Thu, 25 Feb 2010 03:30:18 +0000

几款浏览器对透明度的支持方式各不相同，为了保证在IE, Firefox, Chrome, Safari等主流浏览器下都能正常显示透明度的效果，我们可以定义一个透明度的class，因为一写就要写3条，省的每次都复制来复制去了。
具体代码如下：

.transparent{
filter:alpha(opacity=60);  /*支持 IE 浏览器*/
-moz-opacity:0.60; /*支持 FireFox 浏览器*/
opacity:0.60;  /*支持 Chrome, Opera, Safari 等浏览器*/
}

使用jQuery清空file文件域的方法

Steve Luo — Sun, 21 Feb 2010 04:53:37 +0000

一般来说，在对一个文件域(input type=”file”)使用了验证后，我们总会希望把文件域中的值给清空了（否则错误的文件仍然会被提交），而在IE中，安全设置的原因，是不允许更改文件域的值的（也就是不能使用val(“”)）

那么很显然，我们就只能换个思路，把这个input元素复制一个，然后将原来的删除。
在IE下复制元素的时候，其中的值是不会被复制的，所以就达到了清空文件域的目的了。
而在Firefox下，其中的值也会被一同复制，那么我们就顺便清空一下就做到兼容了。
代码如下：

var file = $(":file");
file.after(file.clone().val(""));
file.remove();

Modern Fun － 摩登坊 » 前端技术

jQuery中使用mouseleave代替mouseout

CSS透明度在各浏览器下的兼容实现

使用jQuery清空file文件域的方法

Modern Fun －摩登坊 » 前端技术