-3

私は6つのアイコンを持っています。それらを垂直に表示したいのですが、アイコンの前に赤いバーが1つあり、ユーザーのマウスオーバー効果が次のように表示されます:

ここに画像の説明を入力

CSS でこの効果を表示するにはどうすればよいですか?

私が試しているのはこれです:

<div style="width: 20%; float: right";>
            <div>
                <div style="width: 20%; float: left; width: 26px; height: 26px">
                    <img  src="../../../Images/red_rectangle.png" /></div>
                <div style="width: 80%; float: right; width: 26px; height: 26px">
                    <img  src="../../../Images/Diploma_24.png" title="Education" /></div>
            </div>
            <div>
                <div style="width: 20%; float: left; width: 26px; height: 26px">
                    <img  src="../../../Images/red_rectangle.png" /></div>
                <div style="width: 80%; float: right; width: 26px; height: 26px">
                    <img  src="../../../Images/Medal_24.png" title="Membership" /></div>
            </div>
        </div>

しかし、デフォルトでは、赤いバーを表示したくない ///*/// マウスオーバーすると:アイコンをクリックすると赤いバーアイコンが表示されます:-ユーザーが他のアイコンをクリックしない限り、赤いバーを表示したままにしますアイコン

4

3 に答える 3

0

あなたのCSSファイルでこれを試してください

CSS スタイル: img {margin-left:5px;} img:hover {border-left:5px solid #f00}

注: これは単なる一般化された CSS であり、特定の CSS 構文が必要になります。

<div>
<div>
    <img  src="../../../Images/red_rectangle.png" />
</div>
<div>
    <img  src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>

しかし、これはより良い考えです：

<ul class="my-menu">
<br>
    <li>
        <img  src="../../../Images/red_rectangle.png" />
    </li><br>
    <li>
        <img  src="../../../Images/Diploma_24.png" title="Education" />
    </li><br>
</ul>

CSS スタイリング:

.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}

于 2013-09-02T08:09:32.203 に答える
0

::afterを使用して疑似要素を作成する例を次に示します。要素はタグdivに置き換える必要があります。img

CSS

.selection{
    width: 30px;
    height: 30px;
    border: 3px solid black;
    margin: 4px;
}

.selection:hover::before{
    content: ' ';
    width: 5px;
    background: red;
    height: 30px;
    display: block;
    position: relative;
    left: -10px;
}

HTML

<div id="container">
    <div class="selection"></div>
    <div class="selection"></div>
    <div class="selection"></div>
    <div class="selection"></div>
</div>

JS フィドル: http://jsfiddle.net/3RJJe/1/

于 2013-09-02T08:00:27.903 に答える