为什么滑入 div 的锚点在 div 内的文本时不起作用

Question

我有一个锚点，当点击它时，一个 div 和 classbox 滑入。在 div 中没有文字的情况下，这非常有效。但是当我在 div 中放置一些文本时，锚点不再起作用。谁能告诉我我做错了什么？

html:

<a class="slide" href="#">Slide Out</a>

<div id="fade-in" class="box"></div>

Css:

a {
  text-decoration: none;
  background: #009de1;
  cursor: pointer; 
  float: right;
  color: #fff;

}

.box {
   display: block;
    background: #009de1;  
    float: right;
    color: #fff;
 }

 #fade-in {
    height: 20px;
    width: 1px;
    opacity: 0;
    transition: all .75s ease;  
 }

 #fade-in.show {
    opacity: 1;
    height: 20px;
    width: 200px;

 }

js:

$('.slide').on('click', function(){
   $('#fade-in').toggleClass('show');
});

这是没有文字的 fiddle。你可以看到主播作品 https://jsfiddle.net/94uhxjgk/41/

这里我在 div 里面放了一些文字，锚点不再工作了 https://jsfiddle.net/94uhxjgk/43/

Answer 1

发生这种情况是因为您的文本太大，它会覆盖您的点击区域，因此它永远不会触发点击事件，要解决此问题，您可以添加

#fade-in{
....
overflow:hidden;
}

fiddle

编辑

由于您的元素的内容大于宽度..

内容呈现在您的 Slide Out 元素上，您看不到它，因为它的不透明度设置为 0.. 所以您实际上单击的是文本，而不是 Slide Out 元素.. 溢出隐藏..实际上以您可以单击滑出的方式剪辑溢出文本。

为什么滑入 div 的锚点在 div 内的文本时不起作用

why anchor for sliding-in div does not work when text inside the div

css

jquery

transitions