Question

我正在尝试将图像划分为不同的部分，以便我可以创建效果，如果我将鼠标悬停在图像的顶部，我需要进行更改，如果我将鼠标悬停在底部，我希望进行其他一些更改看到这个 http://jsfiddle.net/fc3nb5rL/11/

这里我通过在图像顶部创建两个div来实现这一点，但有没有其他方法可以做到这一点？

这是我的代码

HTML

 <div id="top_part">
 <div id="up">UP</div>
 </div>
 <div id="bottom_part">
 <div id="bottom">BOTTOM</div>
 </div>
 <a href="second"><img src="http://placekitten.com/300/300" class="back"></a>

CSS

.container img {
  position:absolute;
  width:300px;
height:300px;
}

#top_part{
position:absolute;
width:300px;
height:150px;
background-color:transparent;
}

#bottom_part{
position:absolute;
width:300px;
height:150px;
margin-top:150px;
background-color:transparent;
}

#up{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
visibility:hidden;
}

#bottom{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
margin-top:132px;
visibility:hidden;
}
#bottom_part:hover #bottom{
visibility:visible;
}

#top_part:hover #up{
visibility:visible;
}

Answer 1

正如我在评论中所说，你可以使用<map>标签将图像区域分成两部分。之后，您可以使用jquery进行悬停功能并根据需要显示内容。

<div id="common"><div id="up">UP</div></div><div id="bottom">BOTTOM</div><a href="second"><img src="http://placekitten.com/300/300" class="back" usemap="#Map"></a></div>
<map name="Map">
 <area id="first" shape="rect" coords="1,0,300,153" href="#">
 <area id="second" shape="rect" coords="2,150,299,301" href="#">
</map>

DEMO

将图像分成不同的部分

1 个答案: