Databases
StackOverflow2013
Postsdbo
POChange height of a list item without affecting other list items
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange height of a list item without affecting other list items
    text
    copied!<p>I have a footer that contains nothing but an unordered list which looks like this:</p> <p><img src="https://i.stack.imgur.com/HQGEL.png" alt="enter image description here"></p> <p>I'm trying to create a hover state which looks like this:</p> <p><img src="https://i.stack.imgur.com/A37Z3.png" alt="enter image description here"></p> <p>So when you hover over a list item, it expands upwards and reveals an image below.</p> <p>Everything I've tried so far to achieve this causes all list items to expand in height when one list item does; I can't seem to get the hovered list item to expand in height without affecting all the others as well. I'm also having trouble figuring out how to get the "Text" part of the list item to stay at the top of the list item in the hover state.</p> <p>EDIT: Please note that the number of list items is dynamic, and the site is responsive. I need the list items to always fill out the full width of the browser window (regardless of how wide the window is, and how many list items there are). I'm using <code>display: table</code> and <code>table-layout: fixed</code> on the unordered list and <code>display: table-cell</code> on the list items to achieve this.</p> <p>I also need for the <code>a</code> to fill the entire list item, so that clicking on the image or on the text area will take the user to the <code>a href="..."</code> location.</p> <p>Here's a jsFiddle with my current HTML and CSS: <a href="http://jsfiddle.net/tsfMD/" rel="nofollow noreferrer">http://jsfiddle.net/tsfMD/</a></p> <p>My current HTML is:</p> <pre><code>&lt;footer&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Text&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/footer&gt; </code></pre> <p>My current CSS is:</p> <pre><code>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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload