在悬停中从左上角移动到右下角

Question

是否可以将元素从左上角移动到右下角 这样的事情：
 

＆＃13;

＆＃13;

#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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

是......而且没有。

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

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

但您无法将left转换为right（或转换为auto），因此您必须使用转换调整元素的位置

＆＃13;

＆＃13;

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%)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

}

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;