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

Answer 2

<span id="matter">Matter written</span>
<span id="ico">image.ico</span>

$('#ico').hide();

$('#matter').mouseover(function() {
    $('#ico').show();
});

$('#matter').mouseleave(function() {
    $('#ico').hide();
});

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

2 个答案: