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

【css基础】html图片右上角加上删除按钮的更多相关文章

  1. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  2. CSS 基础 例子 图片拼合技术

    利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...

  3. CSS基础 背景图片的相关属性

    属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...

  4. C# winform combobox控件中子项加删除按钮(原创)

    效果如下图,本人网上搜索资料加上自己的研究终于实现了在combobox子项中加上删除按钮. 一.窗体中的代码: using System; using System.Collections.Gener ...

  5. 动态加载/删除css文件以及图片预加载

    动态加载/删除css文件以及图片预加载   功能模块页面   最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...

  6. HTML&CSS基础-html的图片标签

    HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. HTML+CSS基础(HTML篇)

    引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完不成一些功能的,本篇开始学习HTML,文章的主要内容是总结了慕课网中,HTML+CSS ...

  9. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

随机推荐

  1. 【算法笔记】B1037 在霍格沃茨找零钱

    1037 在霍格沃茨找零钱 (20 分) 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特( ...

  2. POJ 2763 (LCA +RMQ+树状数组 || 树链部分) 查询两点距离+修改边权

    题意: 知道了一颗有  n 个节点的树和树上每条边的权值,对应两种操作: 0 x        输出 当前节点到 x节点的最短距离,并移动到 x 节点位置 1 x val   把第 x 条边的权值改为 ...

  3. UESTC - 1610 递推方程+矩阵快速幂

    感觉像是HDU Keyboard的加强版,先推出3张牌时的所有组合,然后递推出n张牌 看到n=1e18时吓尿了 最后24那里还是推错了.. (5行1列 dp[1][n],dp[2][n],dp[3][ ...

  4. [转] Nook Glowlight Plus入门指南(Root及相关软件设置)

    [From] http://www.dakang.info/nook-glowlight-plus-root/ 本文仅仅是对大神 xukong及众多热心Hper帖子的一个汇总,稍作个人补充,方便查询, ...

  5. Oracle的pipelined函数实现高性能大数据处理

    从Oracle 8开始,我们就可以从一个collection类型的数据集合中查询出数据,这个集合称之为"虚拟表".它的方法是"SELECT FROM TABLE(CAST ...

  6. 基于scrapy的一些实例

    一.爬取斗鱼主播 1. 爬虫文件 # -*- coding: utf-8 -*- import scrapy import json from Douyu.items import DouyuItem ...

  7. PIE SDK栅格数据唯一值渲染

    1. 功能简介 栅格数据唯一值渲染,是以像元为单位,不同的像元值设置不同的颜色,从而达到唯一值显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 实例化唯一值渲染对象 第二步 初始 ...

  8. 【Tensorflow】 Object_detection之配置Training Pipeline

    参考:Configuring an object detection pipeline 1.config文件 配置好的config文件存放路径:object_detection/samples/con ...

  9. (转)CentOS/Linux 解决 SSH 连接慢

    CentOS/Linux 解决 SSH 连接慢 原文:http://blog.csdn.net/doiido/article/details/43793391 现在连接linux服务器一般都是使用SS ...

  10. C# 定制特性

    一.初识特性 特性(attribute)是被指定给某一声明的一则附加的声明性信息. 设计类型的时候可以使用各种成员来描述该类型的信息,但有时候我们可能不太愿意将一些附加信息放到类的内部,因为这样,可能 ...