jquery給圖片添加鼠標經(jīng)過時的邊框效果
更新時間：2013年11月12日 17:30:54 作者：
鼠標經(jīng)過時圖片產(chǎn)生塌陷，實則應(yīng)該將邊框控制直接加在IMG標簽上即可，下面有個不錯的示例，大家可以感受下
一哥們兒要給圖片添加鼠標經(jīng)過時的邊框效果，可惜出發(fā)點錯了，直接加在了IMG外的A標簽上致使 鼠標經(jīng)過時圖片產(chǎn)生塌陷，實則應(yīng)該將邊框控制直接加在IMG標簽上即可
錯誤代碼如下：注意紅色部分設(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 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è)計思路：紅色部分為調(diào)整后的設(shè)置
<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>
錯誤代碼如下：注意紅色部分設(shè)置 （出發(fā)點就錯了）
復(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è)計思路：紅色部分為調(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)文章
下面小編就為大家?guī)硪黄O(shè)置jquery UI 控件的大小方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格)
這篇文章主要介紹了JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格),本文的這個模擬實現(xiàn)的購物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識點,需要的朋友可以參考下2015-01-01
本文通過實例代碼給大家介紹了jquery 與css相結(jié)合實現(xiàn)的下拉列表功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
接著上次scrollable的學習，今天繼續(xù)jquery tools六大功能的第四個功能——overlay的學習。2009-09-09
這篇文章主要介紹了jQuery中change事件用法,以實例形式分析了在匹配元素焦點變化時觸發(fā)事件使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery實現(xiàn)橫向帶緩沖的水平運動效果(附demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)橫向帶緩沖的水平運動效果,涉及jQuery中鼠標事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了基于JQuery實現(xiàn)簡單的折疊菜單效果，這個功能實現(xiàn)起來很簡單，需要的朋友可以參考下2015-11-11
jQuery 插件圖片切換 第一次自已償試寫插件，需要的朋友可以參考下2012-05-05
這篇文章主要介紹了jQuery驗證元素是否為空的兩種常用方法,實例分析了兩種常用的判斷為空技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對移動端的Web UI設(shè)計,其中豐富的表單組件調(diào)用起來也是相當方便,接下來就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05