我的设计有一个小问题。我目前只知道如何使用CSS / HTML，我想在我的设计中添加一些“ pzazz”。话虽这么说，我一直在寻找其他尝试做类似事情的jQuery片段。当鼠标悬停在其他项目上时，该文本显示在下方，但是列表中的其他项目即使它们都具有相同的文本，也会向下移动，但是由于display：none一直悬停在它上面，所以好像它不在那里。
这些图片应该比我能解释的更好。
两种不同的状态：
http://gyazo.com/6f736e7ef79409dbd3398facb03dcf5c.png
只是为了澄清; 是其他盒子向下移动。带有橡子的盒子位于相同的位置。
如果您希望查看我使用的代码，可以在这里进行：
http://codepen.io/redhotfusion/pen/ipocE
这是CSS位：
.t_s_ul {
list-style-type:none;
width:90%;
padding-left:5px;
margin-left:-10px;
margin:0 auto;
}
.t_s_li {
width:70px;
height:70px;
border:4px white solid;
display:inline-block;
border-radius:5px;
margin:5px;
position:relative;
}
.t_s_li:hover{
transition:1s;
background-color:white;
}
.type_icon {
background:url("http://i.imgur.com/xix8EC9.png");
width:100%;
height:100%;
background-size:100%;
margin-left:-2px;
}
.type_icon:hover{
transition:1s;
cursor:pointer;
background:url("http://i.imgur.com/e1IONg2.png");
}
.course_type_text {
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
HTML：
<ul class="t_s_ul">
<li class="t_s_li">
<div class="type_icon"></div>
<DIV class="course_type_text">Course One</DIV>
</li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
</ul>
JS / JQUERY
$(function(){
$(".spire-menu").hover(function(){
$(this).find(".menu-item").fadeIn();
}
,function(){
$(this).find(".menu-item").fadeOut();
}
);
});
$(".spire-menu").on('mouseenter mouseleave', function () {
$(this).find('.box').fadeToggle(100);
});
非常抱歉，这是一个真正的菜鸟问题，但我们都必须从某个地方入手！
任何建议或帮助都很棒！
谢谢 ，
-政府
由于您正在使用display:inline-block并排的li元素，因此可以在类中使用它t_s_li：
.t_s_li {
vertical-align:top;
}
演示http://codepen.io/anon/pen/jHbBq
默认情况下，vertical-alignfor inline-block元素为baseline。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句