Question

我有一个page，在添加一些图像鼠标悬停后会出现神秘的滚动问题。如果我把鼠标移开，问题就会消失。我的CSS的一些相关部分：

body {
  width: 970px;
  background: url(notebook.png) repeat-y;
  background-position: center top;
  background-attachment: fixed;
  font: 1em "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  margin: 0 auto;
  color: black;
}
table {
  width: 970px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

任何人都可以解释这种奇怪的行为吗？

Answer 1

您会看到horizontall滚动，因为图像在HTML文档中有空格。您应该在display:none;显示时隐藏它，并在显示时隐藏display: block;或display: initial;。

你有

.static span {
    visibility: hidden;
    position: absolute;
    background-color: ghostwhite;
    padding: 7px;
    font-size: smaller;
    text-align: justify;
}

但是visibility: hidden;只是隐藏了元素，但仍然腾出空间，使用display: none;

<强>更新

改变这个：

.static span {
    visibility: hidden;
    position: absolute;
    background-color: ghostwhite;
    padding: 7px;
    font-size: smaller;
    text-align: justify;
}

到此：

.static span {
    display: none;
    position: absolute;
    background-color: ghostwhite;
    padding: 7px;
    font-size: smaller;
    text-align: justify;
}

而且：

.static:hover span {
    visibility: visible;
    right: 50px;
    bottom: 50px;
    opacity: 0.9;
}

对此：

.static:hover span {
    display: initial;
    right: 50px;
    bottom: 50px;
    opacity: 0.9;
}

问题解决了:)）

添加图像鼠标悬停后的神秘滚动问题

1 个答案: