Question

我正在创造一个游戏，其中3个玩家互相争斗，他们每个都有头像并且彼此面对。

现在好了解问题。一旦角色被持续超过1回合的技能作为目标，那么该技能的图像将被放置在角色图标的左上角（然而敌人团队的图像会像这个prntscr * com / 6d354s一样向右浮动）。

现在这是我的问题，当你将鼠标悬停在这些效果图像上时，它们会给你一个弹出容器，显示效果描述（我已在上面链接的图像中显示）...正如你所见，我已经管理过让它工作，但它是错误的，我应该将效果描述放在效果图标旁边，这对于右侧不起作用。

对于左侧，我设法使用css悬停属性使其工作prntscr * com / 6d34a2和http://prntscr.com/6d33zy。

<div>
  <a class="tooltip">
  <img class="effect-icon">
  <div class="effect-description">
       <h1></h1>
       <p></p>
   </div>
   </a>
</div>

在上面的代码中，我在效果的容器上应用了position relative，并且我将效果描述隐藏在display: none;中，我向左浮动。然后在css文件中我设置了.tooltip:hover div{display: inline-block; position:absolute;}，它显示了效果描述，并将它放在图像图标的旁边，而没有按下其他图像，如prntscr.com * 6d3ihu

这种方法很有效，但是在我不能正常工作之前的右侧，它会将div推离效果图标......

请帮帮我？：（

http://codepen.io/anon/pen/jEpgbX我提供了一个示例，我希望右侧效果描述显示在图标的左侧..

Answer 1

很难说没有看到问题的实际演示，但我建议修改left的{{1}}和right属性。

e.g。

.effect-description

编辑：看了你的CodePen演示后，我更新了我的答案并创建了一把叉子，以证明我的答案http://codepen.io/anon/pen/OPwKbE

在CSS中定位各种元素时遇到问题

1 个答案: