1

好的,所以基本上这就是我想要做的,但是 - 因为我不是 CSS 的向导 - 我需要一些输入......

  • 我想创建一个新班级
  • 当这个类被应用到一个项目(一个div或其他 - 显然有足够的尺寸以便它适合)时,一个小的可点击的预定义图像显示这个项目的右上角

我该怎么办?有任何想法吗?

4

3 回答 3

3
<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
});
于 2013-08-16T05:20:54.663 回答
0

图片未显示:

<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

于 2013-08-16T05:18:03.730 回答
0

您可以对要动态添加的类使用: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;
}

工作小提琴

工作小提琴带图像

于 2013-08-16T05:33:47.347 回答