如何在不移动列表中其他项目的情况下使文本出现在 div 下？答案

【问题标题】：How to make text appear under div without moving other items in list?如何在不移动列表中其他项目的情况下使文本出现在 div 下？
【发布时间】：2013-12-29 14:57:41
【问题描述】：

我的设计有一点小问题。我目前只知道如何使用 CSS/HTML，我想在我的设计中添加一点“pzazz”。话虽如此，我一直在查看其他尝试做类似事情的人的 jQuery sn-ps。当另一个项目悬停在上面时，文本出现在下面，列表中的其他项目向下移动，即使它们都有相同的文本，但是自从 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:none 放到您的 .course_type_text 中，否则它将在加载时显示。 codepen.io/barrigaj/pen/wkAgG
@barrigaj 谢谢！你解决了我的第二个文本问题！谢谢大家！

标签： javascript jquery html css opacity

【解决方案1】：

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

这可以防止 div 改变布局。

你甚至可以删除你添加到该类的固定，因为它只会与所有其他 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

【讨论】：

并添加顶部：70px；显示图片下方的文字。

【解决方案2】：

由于您使用display:inline-block 来并排使用li 元素，您可以在您的班级t_s_li 上使用它：

.t_s_li {
  vertical-align:top;
}

演示http://codepen.io/anon/pen/jHbBq

默认情况下，内联块元素的vertical-align 是baseline。

【讨论】：

非常感谢！那为我解决了！再次感谢您。
另一个问题；现在它们不会移动，但是文本最初在那里，直到您将鼠标悬停在它上面并且它消失了。是否可以将文本隐藏在开头？
只需将display: none; 应用于您的文本
@ValdisBarrett 我不在这里......就像 RononDex 说的，只需在文本类上应用 display:none

【解决方案3】：

尝试添加：

float: left;

到你的.t_s_li 班级

http://codepen.io/anon/pen/oLIbz

或者 Dank 和 RononDex 的建议……这只是另一种方法。 :D

【讨论】：

【解决方案4】：

将float:left 应用到.t_s_li

像这样，

.t_s_li {
  float:left;
}

【讨论】：

【解决方案5】：

这是你的 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;
}

演示JSFIDDLE

【讨论】：