Question

我有一个简单的动画foooter，当我鼠标悬停在div节目上，但我无法显示文本。它打破了我的头......

 //Animated Footer
  $("#foeter")
    .mouseenter(function() {
      $("#invisible").slideDown("1000");
    })
    .mouseleave(function() {
      $("#invisible").slideUp("1000");
    });
  });

https://jsfiddle.net/rekgd5tc/

有人知道我在这里缺少什么吗？

Answer 1

问题在于你使用bootstrap css并且bootstrap中的类.invisible添加了visibility: hidden。

尝试更改类名或删除它，并在CSS中使用其他选择器，例如ID。

https://jsfiddle.net/rekgd5tc/1/

#invisible {
    display:none;
    background-color: pink;
}

<div id="invisible"> </div>

Answer 2

显然.invisible是一个预定义的引导类，它添加visibility: hidden，在您的情况下会与动态display设置冲突。

将该类的名称更改为其他类可以解决您的问题。在这个小提琴中，我将其更改为.not_visible：https://jsfiddle.net/u8jkkdh4/

Answer 3

免责声明： - 这不是OP问题的答案，正确答案是@stewartside的答案，但只是想向OP展示如何实现同样的目标只使用CSS效果，不需要javascript

JS Fiddle

<强> CSS：

.foeter {
  font-family: 'Raleway';
  color: #FFFFFF;
  height:20px;
  transition:all 1s;
}
.foeter:hover{
   height:130px;
   transition:all 1s;
}
.inv {
  background-color: pink;
}
.foeter #alwaysThere{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color: #4A527A;
}

<强> HTML：

  <div class="container">
    <footer class="navbar-fixed-bottom foeter">
      <div class="foeter" id="foeter">
        <div class="inv" id="inv">
          <p>
            Wordt dit nu zichtbaar
            <br> Hier komt de info die zichtbaar moet worden
          </p>
          <br> nog meer tekst
          <br> het wordt nu een heel verhaal
          <br>
        </div>
        <!-- invisble -->
        <span id="alwaysThere">
          Altijd visible text.
        </span>
      </div>
      <!-- foeter -->
    </footer>
  </div>

页脚动画有效但文本未显示

3 个答案: