Question

我有一个鼠标悬停效果，当一个客户悬停一个标志时，上方的图片会带有一个国家的小图标和一条消息，“查看英文网站”或“Regardez la website en francais”或其他

我使用像素和百分比尝试了我的 css位置，但是，如果你使用1280或1900屏幕分辨率，图片可能会偏离。这就是我想要的样子：

                                                 picture should be here
                                   flag 1 flag2 flag3 flag4 flag5 flag6

当图片显示时，当它们悬停在上面时。 Treemonkey帮助我今天早些时候到达那里，现在我只需要让CSS失效。目前，我的CSS是这样的：

  .map{
  display:none;
  }
  a.flagbutton:hover .map{
  display:block;
  position:fixed;
  top:14%;
  right:20%;
  }

如果有人可以就不同的屏幕分辨率来解决这个问题做出任何建议 - 如果有可能的话 - 我会非常感激！

Answer 1

您可以为所有字段使用容器，为标志链接使用另一个容器

<div class="top_container">

    <div class='map_cont'>map</div>

    <div class='flags_cont'>
        <a href="#" class='flagbutton'>flag 1</a>
        <a href="#" class='flagbutton'>flag 2</a>
        <a href="#" class='flagbutton'>flag 3</a>
        <a href="#" class='flagbutton'>flag 4</a>
    </div>
</div>

将顶部容器的边距设置为auto，使其在每一边保持一定距离，然后将'map_cont'和'flags_cont'容器向右浮动，使它们出现在屏幕的右侧。

.top_container { width:90%; margin:auto; }
.map_cont{ float:right; }
.flags_cont { clear:both; float:right }
a.flagbutton { margin-left:5px; }

通过CSS图像定位和屏幕分辨率，我如何才能最好地定位这张图片？

1 个答案: