Question

我的设计有点问题。我目前只知道如何使用CSS / HTML，我想在我的设计中添加一些“pzazz”。话虽这么说，我一直在寻找其他试图做类似事情的人的jQuery片段。当其他项目悬停时，文本显示在下方，但是列表中的其他项目向下移动，即使它们都具有相同的文本但是由于显示：无，直到它被徘徊，就好像它不存在一样。

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

两种不同的状态：

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>

THE 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);
});

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

任何建议或帮助都很棒！

谢谢，

-Valdis

Answer 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

Answer 2

由于您使用display:inline-block并排li个元素，因此您可以在课程t_s_li上使用此元素：

.t_s_li {
  vertical-align:top;
}

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

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

Answer 3

尝试添加：

float: left;

到您的.t_s_li班级

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

或者Dank和RononDex建议......这只是另一种方式。：d

Answer 4

将float:left应用于.t_s_li

像这样，

.t_s_li {
  float:left;
}

Answer 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

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

5 个答案: