javascript - 如何在不移动列表中其他元素的情况下使文本出现在 div 下？

Question

我的设计有一个小问题。我目前只知道如何使用 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);
});

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

任何建议或帮助都很棒!

谢谢，

-瓦尔迪斯

Answer 1

将 position: absolute; 添加到 css 中的 .course_type_text

这可以防止 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();
  }
);    

这将防止在您多次使用鼠标快速移动时动画排队。

演示请看这里: http://codepen.io/anon/pen/fICiD