3

我有一个页脚，其中只包含一个无序列表，如下所示：

在此处输入图像描述

我正在尝试创建一个看起来像这样的悬停状态：

在此处输入图像描述

因此，当您将鼠标悬停在列表项上时，它会向上扩展并显示下面的图像。

到目前为止，我为实现这一目标所做的一切都会导致所有列表项的高度在一个列表项发生时扩展；我似乎无法让悬停的列表项在不影响所有其他项的情况下扩展高度。我也无法弄清楚如何让列表项的“文本”部分在悬停状态下保持在列表项的顶部。

编辑：请注意，列表项的数量是动态的，并且网站是响应式的。我需要列表项始终填写浏览器窗口的整个宽度（无论窗口有多宽，以及有多少列表项）。我在无序列表和列表项上使用display: tableand来实现这一点。table-layout: fixeddisplay: table-cell

我还需要a填充整个列表项，以便单击图像或文本区域将用户带到该a href="..."位置。

这是我当前的 HTML 和 CSS 的 jsFiddle：http: //jsfiddle.net/tsfMD/

我当前的 HTML 是：

<footer>
    <ul>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
    </ul>
</footer>

我当前的 CSS 是：

footer {
  position: fixed;
  bottom: 0px;
}

footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: table;
  width: 100%;
  table-layout: fixed;
}

footer ul li {
  margin: 0;
  display: table-cell;
  border-right: 1px solid #d1d2d4;
  border-left: 1px solid #d1d2d4;
  vertical-align: bottom;
  background-image: url('http://puu.sh/4ySYl.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

footer ul li:hover {
  height: 230px;
}

footer ul li:first-child {
  border-left: none;
}

footer ul li:last-child {
  border-right: none;
}

footer ul li a {
  text-decoration: none;
  display: block;
  height: 50px;
  line-height: 50px;
  background-color: #eee;
  padding: 0 40px;
}
4

1 回答 1

2

约旦。在这种情况下，您应该对列表项使用 inline-block（而不是 table-cell）。这将允许您为每个单独的列表项设置动态高度。所以，而不是

footer ul li {
  display: table-cell;
}

你应该使用

footer ul li {
  display: inline-block;
}

所有其他样式和属性可以保持不变。

另外，我已经更新了你的fiddle.

于 2013-09-24T05:17:42.510 回答