悬停DIV然后显示另一个div *而不重新定位*它

Question

这就是我尝试过的。 CSS：

{
  "Sid": "<SID>",
  "Effect": "Allow",
  "Principal": {
    "AWS": "arn:aws:iam::<account>:user/<user_name>"
  },
  "Action": [
    "s3:GetBucketLocation",
    "s3:ListBucket"
  ],
  "Resource": "arn:aws:s3:::<bucket_name>"
}

HTML：

div#Layer3:hover div#Layer3copy
{ 
    display: inline-block;
} 

我希望隐藏这个div，当它悬停在另一个div时，它会正常工作，

但是从它的实际位置移动了一点，

有解决方案吗？

Answer 1

好的，首先你需要知道CSS的显示，位置和伪状态属性 在你的片段＃Layer3包装＃Layer3copy所以我们可以通过使用直接子选择器在悬停状态调用它，即

#Layer3:hover > #Layer3copy{
   /*Do your things here*/
  }

工作示例：https://jsfiddle.net/ishusupah/eupfr101/

在这个例子中你想要我使用＃Layer3copy display：none和悬停状态我正在显示：block。

您可以随意显示和定位。

Answer 2

你没有隐藏/显示任何div。您在上面的代码中实际执行的操作是，当Layer3 div被悬停时，您将Layer3copy div样式更改为inline block - 这就是它移动的原因。默认情况下，div为block元素 - 这意味着它占据了行的整个宽度。当你将它改为inline-block时，你就是＆＃34;告诉＆＃34;如果行中有足够的宽度，则div要在另一个元素旁边对齐，而不是取整个宽度 - 这就是为什么div在父div旁边移动的原因。

您还需要修改选择器以满足您的要求。

要实际达到你想要的效果（隐藏并显示Layer3copy而不移动它），请使用此CSS代码：

#Layer3 #Layer3copy{
  display: none;
}

#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}

第一个选择器在layer3时给出默认定义 - 容器div没有悬停 - 其中未显示子Layer3copy div（display:none）。

第二个选择器在layer3悬停时说明将样式应用到Layer3copy并将其转换为display:block - 这是divs的默认显示（它们是块元素） - 它正在显示并保持其初始位置而没有＆＃34;运动＆＃34;。

Here is a working example with the above code.

我还在内部div中添加了一个细红色边框，因此您可以在block元素中看到我的意思 - 它占据整行的宽度。

Answer 3

尝试使用此

#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}

尝试调整位置，直到将其放置在您想要的位置。 我想你想成为工具提示或其他东西