jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果
錯(cuò)誤代碼如下:注意紅色部分設(shè)置 (出發(fā)點(diǎn)就錯(cuò)了)
<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è)置
<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>
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示動(dòng)畫(huà)邊框特效
- jQuery實(shí)現(xiàn)邊框動(dòng)態(tài)效果的實(shí)例代碼
- jquery插件corner實(shí)現(xiàn)圓角邊框的方法
- JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
- JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片上顯示邊框效果
- jQuery 淡入淡出 png圖在ie8下有黑色邊框的解決方法
- jquery photoFrame 圖片邊框美化顯示插件
- jquery(1.3.2) 高亮選中圖片邊框
- jquery實(shí)現(xiàn)邊框特效
相關(guān)文章
Jquery多選下拉列表插件jquery multiselect功能介紹及使用
支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇,頭部選項(xiàng),如全選/ 取消全選 /關(guān)閉功能,支持鍵盤(pán)選擇等等,下面與大家分享下具體使用2013-05-05jquery中EasyUI實(shí)現(xiàn)異步樹(shù)
前面我們分享了使用jquery中EasyUI實(shí)現(xiàn)同步樹(shù)的代碼,本文我們就來(lái)看下使用EasyUI實(shí)現(xiàn)異步樹(shù)的方法和示例,希望小伙伴們能夠喜歡。2015-03-03jquery 為a標(biāo)簽綁定click事件示例代碼
jquery 為a標(biāo)簽綁定click事件,當(dāng)被點(diǎn)擊時(shí)執(zhí)行一些動(dòng)作,示例代碼如下,需要的朋友可以參考參考2014-06-06JQuery Ajax通過(guò)Handler訪問(wèn)外部XML數(shù)據(jù)的代碼
JQuery是一款不錯(cuò)的Javascript腳本框架,相信園子里的很多朋友對(duì)它都不陌生,我們?cè)陂_(kāi)發(fā)Web應(yīng)用程序時(shí)難免會(huì)使用到Javascript腳本,而使用一款不錯(cuò)的腳本框架將會(huì)大大節(jié)省我們的開(kāi)發(fā)時(shí)間, 并可以毫不費(fèi)力地實(shí)現(xiàn)很多非常酷的效果。2010-06-06jQuery對(duì)于顯示和隱藏等常用狀態(tài)的判斷方法
這篇文章主要介紹了jQuery對(duì)于顯示和隱藏等常用狀態(tài)的判斷方法,給出了兩種較為常用的判斷方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別,具體內(nèi)容大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果(示例代碼)
這篇文章主要介紹了jquery實(shí)現(xiàn)加載更多"轉(zhuǎn)圈圈"效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11基于jquery實(shí)現(xiàn)的表格分頁(yè)實(shí)現(xiàn)代碼
該方法的運(yùn)用是從后臺(tái)數(shù)據(jù)庫(kù)中一次性取出所有的數(shù)據(jù),運(yùn)用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來(lái),事實(shí)上數(shù)據(jù)還是全部在html頁(yè)面中2011-06-06