css - 悬停时，在 div 右侧显示图像

Question

我有一个操作列表(创建免费帐户、查看统计信息等)。这是它的样子。

        <div class="box_go">
            <div class="ico"><img src="img/ico/arrow_f.png" width="16" /></div>
            <h3>Get a free account</h3>
            <p>And start earning points</p>
        </div>
        <div class="box_go">
            <div class="ico"><img src="img/ico/arrow_f.png" width="16" /></div>
            <h3>View stats</h3>
            <p></p>
        </div>

我希望鼠标悬停时父 div 的右侧出现一个小箭头 (div.ico)。使用 jQuery...但是当我将鼠标悬停在第一个元素上时，两个箭头都会显示...

有什么想法吗？谢谢!

Answer 1

为什么不直接使用 CSS？

.box_go {
    position: relative;
}

.box_go .ico {
   position: absolute;
   right: 10px;
   display: none;
}

.box_go:hover .ico {
    display: block;
}