【css基础】html图片右上角加上删除按钮 

<!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”祖先元素

 

posted @ 2016-06-23 20:52  任意球  阅读(23245)  评论(0)  编辑  收藏  举报