1

OK、基本的にはこれが私がやりたいことですが、私はCSSのウィザードではないので、入力が必要です...

  • 新しいクラスを作りたい
  • このクラスがアイテムに適用されると (div何か - 明らかに収まる適切なサイズのもの)、小さなクリック可能な事前定義された画像がこのアイテム内の右上隅に表示されます。

これについてどうすればよいですか？何か案は？

4

3 に答える 3

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 に答える