-3

我有 6 个图标，我想将它们垂直显示，在图标之前有一个红色条，将显示用户鼠标悬停效果，如下所示：

在此处输入图像描述

如何在 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; 左边框：5px 实心 #fff}
.my-menu li img:hover {border-left:5px 实心 #f00}

于 2013-09-02T08:09:32.203 回答
0

演示：http: //jsfiddle.net/gvee/PcgaA/2/

HTML

<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />

CSS

img {
    border-left: 2px solid transparent;
    padding-left: 2px;
    margin: 5px;
}
img:hover {
    border-left-color: red;
}
于 2013-09-02T07:51:59.847 回答
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 回答