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。您可以查看小提琴here。

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

1 个答案: