【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”祖先元素
【css基础】html图片右上角加上删除按钮的更多相关文章
- css基础之 图片瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果 (一)
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
- CSS 基础 例子 图片拼合技术
利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...
- CSS基础 背景图片的相关属性
属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...
- C# winform combobox控件中子项加删除按钮(原创)
效果如下图,本人网上搜索资料加上自己的研究终于实现了在combobox子项中加上删除按钮. 一.窗体中的代码: using System; using System.Collections.Gener ...
- 动态加载/删除css文件以及图片预加载
动态加载/删除css文件以及图片预加载 功能模块页面 最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...
- HTML&CSS基础-html的图片标签
HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- HTML+CSS基础(HTML篇)
引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完不成一些功能的,本篇开始学习HTML,文章的主要内容是总结了慕课网中,HTML+CSS ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
随机推荐
- poj 1220 NUMBER BASE CONVERSION
NUMBER BASE CONVERSION Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5976 Accepted: ...
- HDU_2082 找单词 【母函数的应用】
题目: 假设有x1个字母A, x2个字母B,..... x26个字母Z,同时假设字母A的价值为1,字母B的价值为2,..... 字母Z的价值为26.那么,对于给定的字母,可以找到多少价值<=50 ...
- Codeforces - 617E 年轻人的第一道莫队
我对莫队算法最为纠结的地方就是区间端点处,应该是像代码里那样理解吧 cnt[i]表示i出现的次数 maxn开2e6比较保险 /*H E A D*/ struct Query{ int l,r,id; ...
- win10 装centos7 虚拟机
1.下载VMware Workstation 64版本 https://www.vmware.com/products/workstation-pro/workstation-pro-evaluati ...
- JSON.parse(JSON.stringify()) 实现对对象的深拷贝
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反 ...
- CenctOS6 and CenctOS7 多种姿势解决忘记密码
-----linux---- 忘记密码啦!!! 忘记密码教程!!! 教你们忘记密码(我原来密码就是123456,忘记是不可能的!假装忘记的样子 0.0) 现在我们忘记密码了!对忘记密码了.我忘记密码了 ...
- 简单的 shell 脚本 切分日志
为避免日志过大,需要按天分割日志,定时计划任务脚本如下: /data/shell/backup_yesterday_nginx_log.sh declare logs_path="/data ...
- python 生成、删除、拷贝目录
1. 生成目录 函数原型:distutils.dir_util.mkpath(name[, mode=0777, verbose=0, dry_run=0]) from distutils impor ...
- HRBUST 1909——理工门外的树——————【离线处理,差分前缀和】
理工门外的树 Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %lld , %llu Java class n ...
- CTPN_论文阅读总结
论文全名:Detecting Text in Natural Image with Connectionist Text Proposal Network 1.摘要 (1)本文提出新型网络CTPN,用 ...