html - 悬停时从左上角移动到右下角

Question

是否可以将元素从左上角移动到右下角
像这样:

#example {
  width: 40px;
  height: 40px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 300ms ease 0s;
  right: auto;
  bottom: auto;
}

#example:hover {
  right: 0;
  bottom: 0
}

<div id="example"></div>

Answer 1

是...也不是。

问题是一旦你悬停你的 div 就会移动，所以一旦它从光标下方移动就会停止悬停并且悬停状态将失败。

因此，您必须将悬停移动到另一个元素(可能是 body)。

但是你不能将 left 转换到 right(或到/从 auto)所以你必须调整位置具有转换的元素。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#example {
  width: 40px;
  height: 40px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 300ms ease 0s;
}
body:hover #example {
  left: 100%;
  top: 100%;
  transform: translate(-100%, -100%)
}

<div id="example"></div>

注意:如果元素的高度/宽度已知，您也可以使用 calc 并避免转换。

body:hover #example {
    left:calc(100% - 40px);
    top:calc(100% - 40px);

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#example {
    width:40px;
    height:40px;
    background:red;
    position:absolute;
    top:0;
    left:0;
    transition: all 300ms ease 0s;
}
body:hover #example {
    left:calc(100% - 40px);
    top:calc(100% - 40px);
}

<div id="example"></div>