在右上角显示一个小图像
Display a small image at the top-right corner
好的,所以基本上这就是我想要做的,但是-因为我不是一个CSS向导-我需要一些输入。。。
- 我想创建一个新类
- 当这个类应用于一个项目(
div
或其他任何东西-显然具有足够的尺寸以使其适合)时,一个小的可点击预定义图像会显示在该项目内部的右上角
我该怎么做?有什么想法吗?
<div class="hasicon">
<img src="blah.jpg" class="icon" />
</div>
CSS:
.icon { display: none; }
.hasicon { position: relative; }
.hasicon .icon {
display: block;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
cursor: pointer;
}
jQuery:
$('body').on('click', '.hasicon > .icon', function() {
// do something
});
要使用它,只需将类hasicon
添加到div中。没有该类的div将不会显示图标。
更新:
如果更适合您的要求,您可以尝试使用空跨度:
<div class="hasicon">
<span></span>
</div>
CSS:
.hasicon { position: relative; }
.hasicon > span {
display: block;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
cursor: pointer;
background: url('myImage.png') center no-repeat;
}
jQuery:
$('body').on('click', '.hasicon > span', function() {
// do something
});
未显示的图像:
<div class="DivWithImage">
<img src="blah.jpg" class="thumbIMG">
</div>
正在显示的图像:
<div class="DivWithImage">
<img src="blah.jpg" class="thumbIMG shown">
</div>
CSS:
.DivWithImage .thumbIMG{
position: absolute;
right: 0px;
top: 0px;
display:none;
}
.DivWithImage .thumbIMG.shown{
display:block;
}
然后,您需要使用javascript来应用或删除类shown
。
您可以对动态添加的类使用:after
和:before
伪选择器。
HTML
<div class="something dynamicallyAdded"></div>
CSS
.dynamicallyAdded {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.dynamicallyAdded:after {
content:"";
width: 100px;
height: 100px;
top: 0;
right: 0;
position:absolute;
background-color: red;
}
/* if you want the hover effect */
.dynamicallyAdded:hover:after {
content:"";
background-color: green;
}
工作Fiddle
工作Fiddle(带图像的)
相关文章:
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 如何将多个画布保存为一个图像
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- Javascript/jQuery压缩一个图像正确的评论帖子,并使用Ajax Laravel 5.2保存到控制器中
- 如何在设定的时间间隔内一次只显示一个图像
- 循环以检查数组中的最后一个图像
- 下载Div&画布为一个图像
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 在引导程序旋转木马中显示下一个图像
- 拉斐尔用一个图像填满了这个圆圈
- 将多个重叠的透明图像保存为一个图像
- 我怎么能把它做成这样一个图像就不能拖动了
- 普通JS:使80%宽度元素100%IF包含一个图像
- 当滑块只有一个图像时,如何禁用下一个/上一个按钮
- 如何使用onclick事件点击一个图像,并让它更改同一网页上的另一个图像
- 将多个画布保存为一个图像(使网站像PicFrame一样)
- 在 JavaScript 中将一个.PNG图像拖放到另一个图像上
- 如何在CSS中修复与另一个图像进行比较的图像
- 只有一个图像被绘制到画布上
- 使用 jQuery 在最后一个图像之后附加 HTML