Jquery adds a mouse over border effect to images

2020-03-29 23:41:07
OfStack

< / p > < p > A buddy to add the mouse over the picture border effect, but the starting point is wrong, directly added to the IMG outside the A label caused the mouse over the picture collapse, in fact, should be directly added to the border control on the IMG label
The error code is as follows: note the red Settings.

 
<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>

Correct design idea after modification: the red part is the setting after adjustment

 
<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>