在右上角顯示一個小圖像

Question

好的，所以基本上這就是我想做的事情 - 因為我不是這樣的CSS向導 - 我需要一些輸入......

• 我想創建一個新類
• 當這個類被應用於一個項目（一個div或其他任何東西 - 顯然有足夠的尺寸以便它適合）時， 在該項目的右上角顯示一個小的可點擊的預定義圖像

我該怎么辦呢？ 有任何想法嗎？

Answer 1

<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
});

Answer 2

圖像未顯示：

<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 。

Answer 3

您可以使用: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;
}

工作小提琴

工作小提琴 （ 含圖片 ）