Javascript 如何使文本显示在div下而不移动列表中的其他项？

我的设计有点问题。我目前只知道如何使用CSS/HTML，我想在我的设计中添加一点“pzazz”。话虽如此，我一直在看其他试图做类似事情的人的jQuery代码片段。当另一个项目悬停时，文本显示在下面。但是，列表中的其他项目向下移动，即使它们都有相同的文本，但由于显示：在悬停之前，没有，就好像它不在那里一样

这些图片应该比我能解释的好得多

两个不同的国家：

只是澄清一下；是其他盒子向下移动。装有橡子的盒子保持在同一位置

如果您希望看到我使用的代码，您可以在此处查看：

以下是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>

非常抱歉，如果这是一个真正的问题，但我们都必须从某个地方开始

任何建议或帮助都很好

谢谢,

---

-Valdis

添加

位置：绝对到你的
。课程\在css中键入\文本

这可以防止div更改布局

然后，您甚至可以删除添加到该类中的fixed，因为它将与所有其他html元素重叠

同时将悬停功能更改为：

$(".t_s_li").hover(function(){
  $(this).find(".course_type_text").stop(true, true);
  $(this).find(".course_type_text").fadeIn();
  }
  ,function(){
      $(this).find(".course_type_text").stop(true, true);
      $(this).find(".course_type_text").fadeOut();
  }
);    

当您用鼠标在动画上快速移动几次时，这将防止动画排队

有关演示，请参见此处：
由于您使用的是
显示：内联块
来并排获取
li
元素，因此您可以在您的类中使用它
t\u\li
：

.t_s_li {
  vertical-align:top;
}

演示

默认情况下，内联块元素的
垂直对齐
为
基线
尝试添加：

float: left;

到你的
.t\u s\u li
班级


或者Dank和RononDex建议的。。。这只是另一种方法D
应用
浮动：左
到
。t\u s\u li

像这样,

.t_s_li {
  float:left;
}

以下是您的css：

.course_type_text {
  float: left;  /*<-----added here*/
  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;
  display:block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

。课程\类型\文本{
float:left；/*请在您的问题中发布您的代码。其他人发布了很好的解决方案，但也不要忘记将display:none添加到您的课程中。键入文本，否则它将在加载时显示。@barrigaj谢谢！您首先解决了我的第二个问题，即文本在那里！谢谢大家！并添加top:70px；以显示图片下方的文本。Tha非常感谢！这为我解决了问题！再次感谢你。还有一个问题；现在他们不会移动，但是文本一开始就在那里，直到你将鼠标悬停在上面，文本消失。是否可以在开始时隐藏文本？只需将
display:none；
应用到你的text@ValdisBarrett我不在这里…就像RononDex说的那样只是申请
显示：文本类上无
.course_type_text {
  float: left;  /*<-----added here*/
  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;
  display:block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}