Question

我有一个非常简单的<ul>由图像组成，这些图像会在悬停时显示人名和一小段信息。我对<ul>的意图是它是水平的，它是在添加悬停方面（<figcaption>）之前的。

我的问题： 1.为什么<ul>不再是水平的，我该如何纠正？ 2.如何在<ul>下方的同一位置显示悬停信息，无论选择哪个<li>？

我已经使用this article from CSS Tricks寻求帮助，但它没有解决我的具体问题。

（如果可能的话，我宁愿严格保留HTML / CSS。）

ul.stylists {
    margin: 0 auto;
    padding-left: 10px;
    width: 582px;
}

ul.stylists li {
    display: inline;
    padding-right: 20px;
}

ul.stylists li:last-child {
    padding-right: none;
}

figcaption {
   display: none;
   opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;  
    -moz-transition: opacity 0.3s ease-out;  
    -ms-transition: opacity 0.3s ease-out;  
    -o-transition: opacity 0.3s ease-out;  
      transition: opacity 0.3s ease-out;
}

ul.stylists li:hover figcaption {
   display: block;
   opacity: 1;
}

Answer 1

这样的事情？ http://jsfiddle.net/7McEX/7/ 将李变为position: relative 然后将figcaption变成position: absolute

Answer 2

或试试这个！只需将position:absolute放入ul.stylists li:hover figcaption和display:inline-block ul.stylists li，请点击此处...

http://jsfiddle.net/bgajjar1/7McEX/13/

Answer 3

这里是DEMO

figcaption display: none:更改为display: block;

并移除ul.stylists li:hover figcaption display: block;

CSS：

figcaption {
    display: inline-block;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;  
    -moz-transition: opacity 0.3s ease-out;  
    -ms-transition: opacity 0.3s ease-out;  
    -o-transition: opacity 0.3s ease-out;  
    transition: opacity 0.3s ease-out;
}

ul.stylists li:hover figcaption {
   opacity: 1;
}

内联列表被悬停效果破坏

3 个答案: