jquery实现图片鼠标经过出现边框效果的代码__function_border_box_this_css_

当前位置: 编程技术>jquery

jquery实现图片鼠标经过出现边框效果的代码

来源: 互联网发布时间：2014-09-03

本文导语: 本节内容： jquery 图片边框效果实现如下的效果：当鼠标经过时图片产生边框效果，将边框控制直接加在IMG标签上。先来看一段错误的控制代码，如下：代码示例: $(document).ready(function(){ $("#box a").mouseover(function(...

本节内容：
jquery 图片边框效果

实现如下的效果：
当鼠标经过时图片产生边框效果，将边框控制直接加在IMG标签上。

先来看一段错误的控制代码，如下：

代码示例:

$(document).ready(function(){
$("#box a").mouseover(function(){
$(this).css("border","1px solid red");
});
$("#box a").mouseout(function(){
$(this).css("border","none");
});
});

#box a{ display:block; z-index:1000; width:98px; height:98px;}

以下为正确的代码：
修改后的正确设计思路，红色部分为调整后的设置

代码示例:

$(document).ready(function(){
$("#box img").mouseover(function(){
$(this).css("border","1px solid red");
});
$("#box img").mouseout(function(){
$(this).css("border","none");
}); // www.
});

#box a{ display:block; z-index:1000; width:98px; height:98px;}