Question

我有全角div，里面有背景图片。背景图片中有人，当您将鼠标悬停在每个人身上时，我想显示工具提示。

我认为你不能写出％宽度的图像映射，所以我试图用DIV来做这件事。像这样：

<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>

和Css是这样的：

.homepageimage{
 width:100%;
  max-width:2000px;
  height:750px;
  margin:auto;
  margin-top:-50px;
 background: url({{ 'homepage_test2.jpg' | asset_url }});
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  clear:both;
  overflow:hidden;
 }

 .artistmap{
   height:100%;
   border:2px solid red;
   float:left;
 }

 .artistmap:hover{
  content:attr(title); 
 }

 #davidmap{
  width:10%; 
 }

 #ceceliamap{
   width:15%;
 }

 #erinmap{
  width:5%; 
 }

 #aimap{
    width:5%; 
 }     

 #tommap{
  width:10%; 
 }

不幸的是，根据屏幕的大小，div不会与人们排成一行......解决这个问题的最佳方法是什么？

我在cssdesk上面发布了上面的代码：

http://cssdesk.com/vmZSD

谢谢！

Answer 1

以下是FIDDLE可能会对您有所帮助。

CSS

.americangothic {
    float: left;
    width: 315px;
    height: 384px;
    background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
    background-size: 315px 384px;
    position: relative;
}
.changemediv1 {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background-color: red;
    border: 3px solid gray;
}
.changemediv2 {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background-color: blue;
    border: 3px solid gray;
}

.face1:hover ~ .changemediv1  {
    background-color: green;
}
.face2:hover ~ .changemediv2  {
    background-color: green;
}
.face1 {
    width: 80px;
    height: 110px;
    border: 0px solid red;
    position: absolute;
    top: 70px;
    left: 35px;
}
.face2 {
    width: 80px;
    height: 130px;
    border: 0px solid red;
    position: absolute;
    top: 30px;
    left: 180px;
}

img {
    width: 315px;
    height: 384px;
}

请记住，所有div都需要在同一个容器中。

将div放在背景图像的顶部，并保持相对位置

1 个答案: