简体繁体 English

Hover 在图标上显示标题不起作用

[英]Hover Over Icon to Display a Caption Not Working Out

原文 2011-08-09 18:18:12 0 1 javascript/ jquery/ css

so I have a row of image icons which are tightly packed into an area, and I want them to move up slightly when I hover over them, and fade in a title just below the icon.所以我有一排紧紧地挤在一个区域中的图像图标，我希望它们在我 hover 上方时稍微向上移动，并在图标下方淡入标题。 I've been able to successfully do this on my own site (can't link to it, sorry), except that I can't get the text to center below the icon and not affect the layout.我已经能够在我自己的网站上成功地做到这一点（无法链接到它，抱歉），除了我无法让文本在图标下方居中并且不影响布局。 I've tried positioning the title using position: absolute, but that uncenters the text below the icon.我尝试使用 position: absolute 来定位标题，但这会使图标下方的文本不居中。 Without the absolute positioning, when it fades in it screws up the rest of the layout.如果没有绝对定位，当它淡入时，它会破坏布局的 rest。 I would just manually position each label using absolute positioning, but our web app is internationalized, so the words will be different lengths, so this needs to be dynamic.我只是手动 position 每个 label 使用绝对定位，但是我们的 web 应用程序是国际化的，所以单词的长度会不同，所以这需要是动态的。 I tried creating a jsfiddle to show what I was doing, but apparently hover doesn't work in it?我尝试创建一个 jsfiddle 来展示我在做什么，但显然 hover 在其中不起作用？

http://jsfiddle.net/QYDmM/ http://jsfiddle.net/QYDmM/

Hope someone can help!希望有人能帮忙！

1 个解决方案

See this jsfiddle: http://jsfiddle.net/RikudoSennin/QYDmM/3/看到这个jsfiddle： http://jsfiddle.net/RikudoSenin/QYDmM/3/

What I changed is I added a new line to the jQuery and added position: relative;我改变的是我在 jQuery 中添加了一个新行并添加了position: relative; on .icon-holder .在.icon-holder上。