我有 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>
但默认情况下,我不想显示红条,///*/// 当鼠标悬停时:单击图标时显示红条图标,:- 我也想保持显示红条,直到用户不点击其他图标