[Html / Javascript / CSS] 當滑鼠移至img時，img右上角出現一個叉叉超連結

2013-12-09

5657
0
HTML

因為工作上客戶需要製作類似FB的圖片刪除方式

備份一下在論壇上的發問：http://social.msdn.microsoft.com/Forums/zh-TW/0abb451a-e8ac-4f28-ab91-fc028ee14ec9/imgimg?forum=236

以下代碼改用jQuery實現


@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.0.3.min.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>

<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="主要圖片.jpg" />
    <a href="#">@*href可以是一個js函式*@
	<img src="http://tdgj.mlr.gov.cn/images/%E5%8F%89%E5%8F%89.jpg" class="delete"/>
    </a>
</div>

回首頁