Question

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

enter image description here

如何在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>

但默认情况下我不想显示红条，鼠标悬停时显示/// * ///：显示红色条形图标点击图标时，： - 我还想保持显示红色条，直到用户不点击其他图标

Answer 1

DEMO： 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;
}

Answer 2

以下是使用::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/

Answer 3

在你的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}

鼠标悬停时，在CSS中的图标菜单前显示红色条

3 个答案:

HTML

CSS