Question

我们说我有这段代码：

<div id="block">asd</div>

当我悬停时（或者当我点击它时，它并不重要）我想让它从左上角移动到右下角

#block{ border: 1px solid black;
        margin-top: 10px;
        margin-left: 10px;}
#block:hover{
        margin-right:10px;
        margin-bottom:10px;

}

但它不起作用。不知何故，我必须在悬停时删除margin-top和margin-left属性，但我不知道如何。

如果可以的话，请用css完成！

Answer 1

#block:hover{
        margin-top: 0px;
        margin-left: 0px;
        margin-right:10px;
        margin-bottom:10px;
}

如果你想这样做，不要重复自己的哲学

#block:hover{
            margin-top: 0px;
            margin-left: 0px;
    }

Answer 2

只需将保证金“全部合并”。

所以它会是：

margin: [top right bottom left]

在你的情况下：

#block{
      margin: 10px 0px 0px 10px;
}

#block:hover{
      margin: 0px 10px 10px 0px;
}

您还可以合并保证金：

margin: [top+bottom] [left+right];

Answer 3

我想这很容易你有：

leave()

因此，在悬停时，您必须取消margin-top和margin-left（将其更改为零），然后应用您想要的保证金！

enters()

就像那样，你的余量会在悬停时消失！

在#block：hover css中，只需将此代码放在那里，一切都应该可以正常工作。

#block{ border: 1px solid black;
        margin-top: 10px;
        margin-left: 10px;}

}

Answer 4

使用transform属性，而不是使用保证金。

要实现这一目标，您需要另一个用作包装器的元素。

将鼠标悬停在包装器上时，请执行以下操作：

使用以下方法将包装器自身移动到右下角：

transform: translate(calc(100% - [<blockWidth>]), calc(100% - [<blockHeight>]));

然后以相反的方向移动.block元素：

transform: translate(calc(-100% - [<blockWidth>]), calc(-100% - [<blockHeight>]));

代码段：

＆＃13;

body {
  margin: 0;
  overflow: hidden;
}
.block-container {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 3s;
}
.block-container:hover {
  transform: translate(calc(100% - 2em), calc(100% - 2em));
}
.block {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: darkorange;
  transition: inherit;
}
.block-container:hover #block {
  transform: translate(calc(-100% - 2em), calc(-100% - 2em));
}

＆＃13;

<div class="block-container">
  <div class="block"></div>
</div>

＆＃13;

Answer 5

可能是这样的：

的CSS：

#block { 
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
#block:hover {top: 90vh; left: 90vw;}

HTML：

<a href="#" id="block"><div>try to catch me</div></a>

如何在悬停时删除margin属性

5 个答案:

代码段：