javascript - 图像鼠标悬停下方的标题无法正常工作

Question

我无法让文字显示在图片下方。相反，当我将鼠标悬停在上面时，它会停留在图像中。我确信这是一个简单的修复，但我在这里把自己逼疯了。如果我删除内联显示功能，则会显示要点。有什么想法吗？

这是我到目前为止所得到的......

CSS

ul li { 
  float:left;
  text-align: center;
  font-family: Helvetica;
  font-size: 15px; 
  display: inline;
  padding:10px; 
  margin:5px;
  background-image: none;
  position: relative;
}
ul li div {
  display: none; 
  position: absolute;
}

HTML

<div class="ul li">
    <ul>
    <li>
        <div class="caption">About</div>
        <img src='about.png'/>
    </li>
    <li>
        <div class="caption">Portfolio</div>
        <img src='portfolio.png'/>
    </li>
    <li>
        <div class="caption">Resume</div>
        <img src='resume.png'/>
    </li>
    <li>
        <div class="caption">Contact</div>
        <img src='contact.png'/>
    </li>
</ul>
</div>

Javascript

$('ul li').mouseenter(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});

Answer 1

您需要为 div 定义 top。请参阅下面的快照。

ul li div {
  display: none; 
  position: absolute;
  top:150px;
}

top 应根据显示的图像 + 字体大小进行调整。你可以检查 fiddle here .