<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="/Scripts/jquery-1.10.2.js"></script>
<style type="text/css">
.imgDiv {
display: inline-block;
position: relative;
}
.imgDiv .delete {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(init);
function init() {
$(".imgDiv").mouseenter(function () {
$(this).find(".delete").show();
});
$(".imgDiv").mouseleave(function () {
$(this).find(".delete").hide();
});
}
</script>
<div class="imgDiv">
<img src="http://img.acgbz.com/Download/892/images/52321860_p0.jpg" />
<a href="#">
<img src="http://www.iconpng.com/png/sm-reflection-r/button-cross.png" class="delete" />
</a>
</div>
</body>
</html>
各位復制運行即可。
可以看到，這里采用的是css的position 的屬性，absolute屬性大家請查詢 http://www.w3school.com.cn/cssref/pr_class_position.asp 的詳細介紹，
布局方面想深入理解則可以點擊此網站：http://zh.learnlayout.com/position.html
回到正題，這里使用absolute是因為右上角交叉圖針對的是它的主圖，而absolute則恰巧是針對它
因為：它不是相對於視窗而是相對於最近的“positioned”祖先元素