快捷導(dǎo)航

jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果

更新時(shí)間：2013年11月12日 17:30:54 作者：

鼠標(biāo)經(jīng)過(guò)時(shí)圖片產(chǎn)生塌陷，實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可，下面有個(gè)不錯(cuò)的示例，大家可以感受下

一哥們兒要給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果，可惜出發(fā)點(diǎn)錯(cuò)了，直接加在了IMG外的A標(biāo)簽上致使鼠標(biāo)經(jīng)過(guò)時(shí)圖片產(chǎn)生塌陷，實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可
錯(cuò)誤代碼如下：注意紅色部分設(shè)置（出發(fā)點(diǎn)就錯(cuò)了）

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box a").mouseover(function(){ 
$(this).css("border","1px solid red"); 
}); 
$("#box a").mouseout(function(){ 
$(this).css("border","none"); 
}); 
}); 
</script> 
<style> 
#box a{ display:block; z-index:1000; width:98px; height:98px;} 
</style> 
</head> 
<body> 
<div id="box" style="width:100px; height:100px;"> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
</div> 
</body> 
</html> 

修改后的正確設(shè)計(jì)思路：紅色部分為調(diào)整后的設(shè)置

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box img").mouseover(function(){ 
$(this).css("border","1px solid red"); 
}); 
$("#box img").mouseout(function(){ 
$(this).css("border","none"); 
}); 
}); 
</script> 
<style> 
#box a{ display:block; z-index:1000; width:98px; height:98px;} 
</style> 
</head> 
<body> 
<div id="box" style="width:100px; height:100px;"> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
<a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

設(shè)置jquery UI 控件的大小方法
下面小編就為大家?guī)?lái)一篇設(shè)置jquery UI 控件的大小方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
這篇文章主要介紹了JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格),本文的這個(gè)模擬實(shí)現(xiàn)的購(gòu)物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識(shí)點(diǎn),需要的朋友可以參考下
2015-01-01
jquery+css實(shí)現(xiàn)下拉列表功能
本文通過(guò)實(shí)例代碼給大家介紹了jquery 與css相結(jié)合實(shí)現(xiàn)的下拉列表功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-09-09
jquery tools系列 overlay 學(xué)習(xí)
接著上次scrollable的學(xué)習(xí)，今天繼續(xù)jquery tools六大功能的第四個(gè)功能——overlay的學(xué)習(xí)。
2009-09-09
jQuery中change事件用法實(shí)例
這篇文章主要介紹了jQuery中change事件用法,以實(shí)例形式分析了在匹配元素焦點(diǎn)變化時(shí)觸發(fā)事件使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果,涉及jQuery中鼠標(biāo)事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01
基于jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單效果
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單效果，這個(gè)功能實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，需要的朋友可以參考下
2015-11-11
jQuery 圖片切換插件(代碼比較少)
jQuery 插件圖片切換第一次自已償試寫插件，需要的朋友可以參考下
2012-05-05
jQuery驗(yàn)證元素是否為空的兩種常用方法
這篇文章主要介紹了jQuery驗(yàn)證元素是否為空的兩種常用方法,實(shí)例分析了兩種常用的判斷為空技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對(duì)移動(dòng)端的Web UI設(shè)計(jì),其中豐富的表單組件調(diào)用起來(lái)也是相當(dāng)方便,接下來(lái)就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下
2016-05-05