Question

我有一个绝对位置的div。它距离左侧 10px 。我想在悬停时将其转换到 10px，从右侧转换到新位置。可能吗？我想＆＃34;取消＆＃34; ＆＃39;离开＆＃39;悬停属性并包含一个新的＆＃39;权利＆＃39;改为属性：

div {
  position: absolute;
  height: 30px;
  width: 30px;
  left: 10px;
  top: 10px;
  transition: 0.9s;
  background-color: blue;
}
div:hover {
  right: 10px;  // Instead of left
}

Answer 1

是的，有可能..

div:hover {
  left: auto;
  right: 10px;  // Instead of left
}

但是 - 作为一个＆＃39;悬停＆＃39;属性，DIV会向右飞过，然后你就不会再被它盘旋了......所以它会反应奇怪。

Answer 2

当转换来自/到auto值时，转换不会像您预期的那样工作。在您的示例中，您可以将正确的属性设置为auto到10px;

您需要保留相同的属性（left）以查看转换

div:hover {
  left: calc(100% - 40px);
}

在这种情况下，您需要移动元素100%左侧减去宽度（30px）减去边距（10px）。如果您事先不知道元素的宽度，则可以添加负数translateX

div:hover {
  left: calc(100% - 10px);
  transform: translateX(-100%);
}

Codepen demo

在悬停时禁用css属性 - ＆gt;右而不是左

2 个答案: