Question

在我的网页上缩小时，我遇到了一些奇怪的行为。我有一些div持有标题和叠加层。当用户将鼠标悬停在div上时，我希望显示（在叠加层中），当用户未悬停时，我希望不显示。

当用户在浏览器中进行0缩放时，此功能正常，但当用户缩小时，我可以看到部分。在缩小的同时，我可以增加bottom来纠正这个问题，但必须有一些我遗漏的东西。

在缩小时是否仍然隐藏？

我明白这一定听起来很疯狂所以我做了一个粗鲁的JSFiddle来展示我在说什么。奇怪的是，当缩小JSFiddle时，我在浏览器中遇到的问题（safari）并没有发生在他们的网站上。

http://jsfiddle.net/FB2TM/

任何帮助将不胜感激！

我应该提到我计划将鼠标设置为动画效果。

Answer 1

这种情况正在发生，因为浏览器没有按比例调整文本大小，最终文本大于应该的大小。调整大小时，您还将在不同的浏览器中体验不同的文字大小。

我发现最好的解决方案是通过完全隐藏不应该显示的文本来做不同的事情：

.box {
  width:200px;
  height:200px;
  background-color:aqua;
  position: relative;
  overflow: hidden;
}

.caption {
  width:200px;
  color:white;
  background-color:black;
  left: 0;
  z-index: 2;
  bottom: 0;
  position: absolute;
}

.caption p {
  display: none;
}

.box:hover .caption {
  bottom:0;
}

.box:hover .caption p {
  display: block;
}

http://jsfiddle.net/FB2TM/2/

Answer 2

从使用负偏移隐藏文本的方法更改为隐藏要隐藏的文本可能会稍微改变您的CSS动画选项。它确实允许从css中删除z-index。

<div class="box">
    <div class="caption">
        <div class="title">THE TITLE</div>
        <p>These are words, I do not want them to show, until mouseover. When zooming out, I can see these words.</p>
    </div>
</div>

和你的css：

.box {
    background-color:aqua;
    height:200px;
    position: relative;
    width:200px;
}
.caption {
    background-color:black;
    bottom:0;
    color:white;
    position: absolute;
    width:200px;
}
.caption p {
    display: none;
}
.box:hover p {
    display: block;
}

jsFiddle

Answer 3

我建议使用top并修复margin-top的位置。例如：

.caption {
    width:200px;
    color:white;
    background-color:black;
    left: 0;
    z-index: 2;
    top:100%;
    margin-top:-30px; //Height of THE TITLE
    position: absolute;
}
.box:hover .caption {
   margin-top:-116px; //Height of .caption
}

我认为使用底部不是一个好习惯。

以下是对小提琴的更新：http://jsfiddle.net/FB2TM/3/

底部：0 - 缩放时的奇怪行为

3 个答案: