求一段鼠标滑过或者点击一张图片,然后在它旁边就会弹出一个框的代码,感谢!

html-css0128

求一段鼠标滑过或者点击一张图片,然后在它旁边就会弹出一个框的代码,感谢!,第1张

完整的例子。其于JQ做的。复制代码打开。

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8" />

<title>测试</title>

<meta name="author" content="Await" />

<meta name="keywords" content="XY" />

<meta name="description" content="" />

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">

*{margin: 0padding: 0}

.wrap{width:1000pxmargin: 0 autopadding: 20px 0px}

.imgBox {position: relativewidth: 500pxheight: 200px}

.detail {position: absoluteright: 0bottom: 0border: 1px solid #ccc}

.hide{display: none}

</style>

</head>

<body id="page">

<div class="wrap">

<div class="imgBox">

<img src="http://img.epinv.com/upimg/epinv/a13825ae62b8_AE28/PSjiqiao.png">

<p></p>

<div class="hide detail">

<img src="http://app.qlogo.cn/mbloghead/0307a200097aedaf1326/50">

</div>

</div>

</div>

<div class="js">

<script type="text/javascript">

jQuery(function($){

$(".imgBox").mouseenter(function(){

$(this).find(".detail").show()

}).mouseleave(function(){

$(this).find(".detail").hide()

})

})

</script>

</div>

</body>

</html>