Question

在我的主页上，top_fixed_right:hover元素完美无缺。

但是，在辅助页面上，只有在使用Chrome中的开发人员工具窗口强制div状态时，相同的:hover才有效。将鼠标悬停在div上时，它不起作用。

我在Safari中打开了同一页但没有运气（主页：是的，辅助页面：否）

＆＃13;

.top_fixed_right {
  position: fixed;
  right: 15;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

.top_fixed_right:hover {
  right: 10;
}

＆＃13;

<div class="top_fixed_right">
  <p>About me</p>
</div>

＆＃13;

Answer 1

您希望在值之后指定px。它现在适用于我。

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

.top_fixed_right:hover {
  right: 10px;
}

<div class="top_fixed_right">
  <p>About me</p>
</div>

Answer 2

在css right属性中需要一个像素值，而您只需设置10和15。

这些值需要以像素为单位，更改：

.top_fixed_right:hover {
  right: 10;
}

要：

.top_fixed_right:hover {
  right: 10px;
}

这是您更新的代码段：

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

.top_fixed_right:hover {
  right: 10px;
}

<div class="top_fixed_right">
  <p>About me</p>
</div>

Answer 3

这是你需要的吗？

＆＃13;

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

＆＃13;

<div class="top_fixed_right">
  <p>About me</p>
</div>

＆＃13;

Answer 4

在分配给不同属性的每个值之后，您没有使用px，尽管一些高级浏览器会为您执行此操作，但您应该更准确地成为编码器。如果在悬停事件中添加'px'，则在属性权限中赋值。

right: 15;  <!-- Not a good practice-->

right: 15px; <!-- Correct syntax-->

您已将位置设置为固定，因此：悬停事件无法移动该文本，因此更改位置属性，或者如果使用onmouseover和onmouseout属性则更好，因为它们的优先级高于css。

检查以下代码，我希望它有所帮助。

.top_fixed_right {
  position: fixed;
  right: 15px;
  top: 0px;
  letter-spacing: 1px;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
  font-family: 'Lato', sans-serif;
}

<div class="top_fixed_right" onmouseover="this.style.right='10px'" onmouseout="this.style.right='15px'">
  <p>About me</p>
</div>

：hover仅在Inspector中强制使用时有效

4 个答案: