好的,所以基本上这就是我想要做的,但是 - 因为我不是 CSS 的向导 - 我需要一些输入......
- 我想创建一个新班级
- 当这个类被应用到一个项目(一个
div
或其他 - 显然有足够的尺寸以便它适合)时,一个小的可点击的预定义图像显示在这个项目的右上角
我该怎么办?有任何想法吗?
好的,所以基本上这就是我想要做的,但是 - 因为我不是 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;
}
工作小提琴(带图像)