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

我有一个操作列表（创建一个免费帐户，查看统计信息等）。这是它的样子。悬停时，在div右侧显示图像

 <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.ico）出现在悬停的父div的右侧。使用jQuery ...但是当我将鼠标悬停在第一个元素上时，两个箭头都显示出来...

任何想法？谢谢！

来源

2010-11-13 Jeremy Dicaire

，而你可以使用jQuery没有理由可以在CSS做纯粹。请显示您正在使用的CSS和jQuery – 2010-11-13 20:07:01

为什么不使用CSS？

.box_go { 
    position: relative; 
} 

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

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

来源

2010-11-13 20:06:47 Domenic

+1 - 可能无法在IE6中运行，但是谁在乎。：o） – user113716 2010-11-13 20:11:10

是的，它的工作和它的一个非常好的主意......但使用jquery将会更加跨浏览器，所以现在使用它，但如果有人可以找到使用jQuery的任何方法，那就太好了。 – 2010-11-16 01:03:53

jQuery更慢，更容易出错，但我承认它可以在IE6中工作。这是您通过使用jQuery来获得的唯一浏览器。 – Domenic 2010-11-16 04:11:26

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

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

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

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

来源

2010-11-13 20:45:12 X10nD

这将无法正常工作;他们会显示，但不会再次隐藏。 – Domenic 2010-11-13 20:52:39

@domenic检查我改变的答案 – X10nD 2010-11-13 20:54:26

我想你会想使用mouseenter与mouseleave配对，而不是mouseover。 – JAL 2010-11-13 20:57:08

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

回答

相关问题