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

Question

我正在创建一个游戏，其中 3 名玩家互相战斗，他们每个人都有化身并且互相面对。

好的，现在开始讨论这个问题。一旦 Angular 色成为持续时间超过 1 回合的技能的目标，该技能的图像就会放置在 Angular 色图标的左上角(然而，敌方团队的图像会像这样漂浮在右边 prntscr*com/6d354s)。

现在这是我的问题，当您将鼠标悬停在这些效果图像上时，它们会给您一个显示效果描述的弹出容器(我已在上面链接的图像中显示)...如您所见，我已经做到了让它工作，但我应该把效果描述放在效果图标旁边是错误的，这不适合右侧。

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

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

在上面的代码中，我在效果容器上应用了相对位置，并使用 display: none; 隐藏了效果描述，并且我将两者都向左浮动。然后在 css 文件中设置 .tooltip:hover div{display: inline-block; position:absolute; 显示效果描述并将其绝对定位在图像图标旁边，而不像这样 prntscr.com*6d3ihu

此方法有效，但在右侧，就像我之前展示的那样无效，它将 div 推离他的效果图标...

请帮帮我好吗？ :(

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

Answer 1

如果没有看到问题的实际演示很难说，但我建议修改 .effect-description 的 left 和 right 属性>.

例如

.tooltip {display: inline-block;}
.tooltip:hover div{ display: inline-block; position: absolute; top: 0 }
.l .tooltip:hover div {left: 50px;}
.r .tooltip:hover div {right: 50px;}

编辑:看完您的 CodePen 演示后，我更新了我的答案并创建了一个 fork 来演示我的答案 http://codepen.io/anon/pen/OPwKbE