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

最新推荐文章于 2022-09-27 10:39:08 发布

weixin_30256901

最新推荐文章于 2022-09-27 10:39:08 发布

阅读量882

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/renyiqiu/p/5612171.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”祖先元素

转载于:https://www.cnblogs.com/renyiqiu/p/5612171.html

weixin_30256901

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css基础】html图片右上角加上删除按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8"...
复制链接

扫一扫