0

ポートフォリオ セクションに「プラス記号」(.png ファイル) を追加しようとしています。私の目標は、この「プラス記号」を、顧客が私のプロジェクトの上にマウス ポインターを置いているときにのみ表示されるようにすることですが、同時に、既に設定した background-color プロパティを保持したいと考えています。

しかし、プラス記号が表示されない!? どうやってやるの？？？

このウェブサイトでも同様の効果を見ることができます: http://bjorsberg.se/

ここに私の JSFiddle があります: http://jsfiddle.net/L8HX7/

これは、修正が必要な私の CSS (JSFiddle から) の一部です。

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

追加したいプラス記号の例を次に示します: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png

4

2 に答える 2

2

これは本当に分解された例です。

http://jsfiddle.net/sheriffderek/UVvWm/

CSS

.block {
    position: relative; /* so the .plus knows what to be relative to */
    display: block;
    width: 10em;
    height: 10em;
    background-color: red;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
}


.block:hover .overlay {
    background-color: rgba(0,0,0,.5);
}

.block .plus {
    display: none;
}

.block:hover .plus {
    display: block;
}



/* to position the .plus */
.plus {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

HTML

<a href="#"class="block">

    <div class="overlay"></div>

    <img class="plus" src="http://placehold.it/100x100" />

</a>

オーバーレイに :after 疑似要素を使用することもできますが、単純にしたかったのです。CSS 宣言は右から左に読み込まれることに注意してください .... "any .plus - do this, when .block:hover" など ----

于 2013-07-23T19:36:42.967 に答える
1

スタイルは明らかにhoverに適用する必要があります。

background-colorin.projectshot a .over:hover{を適切なに置き換えるだけbackgroundです。はまったく必要ありませんしdiv.plus、どちらも必要ありませんdiv.inner(HTML からそれらを削除できます!):

.projectshot a .over:hover{
    position: absolute;
    background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
    border-radius: 8px;
    height: 150px;
    width: 200px;
    margin: 10px;
}

更新された Fiddle は次のとおりです: http://jsfiddle.net/L8HX7/8/

于 2013-07-23T19:26:01.203 に答える