[英]Display a small image at the top-right corner
OK, so basically this is what I want to do but - since I'm not such a wizard with CSS - I'll need some input... 好的,所以基本上这就是我想做的事情 - 因为我不是这样的CSS向导 - 我需要一些输入......
div
or whatever - obviously of adequate dimensions so that it fits), a small clickable pre-defined image is displayed at the Top-Right corner inside this item 当这个类被应用于一个项目(一个div
或其他任何东西 - 显然有足够的尺寸以便它适合)时, 在该项目的右上角显示一个小的可点击的预定义图像 How should I go about this? 我该怎么办呢? Any ideas? 有任何想法吗?
<div class="hasicon">
<img src="blah.jpg" class="icon" />
</div>
CSS: CSS:
.icon { display: none; }
.hasicon { position: relative; }
.hasicon .icon {
display: block;
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
cursor: pointer;
}
jQuery: jQuery的:
$('body').on('click', '.hasicon > .icon', function() {
// do something
});
To use this, simply add class hasicon
to the div. 要使用它,只需将类hasicon
添加到div。 Those divs without the class will not display the icon. 那些没有班级的div将不会显示图标。
UPDATE: 更新:
You could try using an empty span, if it suits your requirements better: 您可以尝试使用空跨度,如果它更符合您的要求:
<div class="hasicon">
<span></span>
</div>
CSS: 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: jQuery的:
$('body').on('click', '.hasicon > span', function() {
// do something
});
Image not being displayed: 图像未显示:
<div class="DivWithImage">
<img src="blah.jpg" class="thumbIMG">
</div>
Image being displayed: 正在显示的图片:
<div class="DivWithImage">
<img src="blah.jpg" class="thumbIMG shown">
</div>
CSS: CSS:
.DivWithImage .thumbIMG{
position: absolute;
right: 0px;
top: 0px;
display:none;
}
.DivWithImage .thumbIMG.shown{
display:block;
}
You then need to use javascript to apply or remove the class shown
. 然后,您需要使用JavaScript来应用或取消类shown
。
You can use :after
and :before
pseudo selectors to the class which you are adding dynamically. 您可以使用:after
和:before
伪选择器到您要动态添加的类。
HTML HTML
<div class="something dynamicallyAdded"></div>
CSS 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;
}
Working Fiddle ( with an image ) 工作小提琴 ( 含图片 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.