如何将<div>鼠标悬停在<area>图像上时显示

Question

这是我的html

<section class="computer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="pull-right" style="width:310px; margin-top:80px; font-family: 'Source Code Pro', monospace;;">
<h3>Shop Individual Items</h3>
<p>Hover over the parts to the left to select the items you would like to browse...</p>
<i class="fa fa-arrow-left fa-3x" aria-hidden="true"></i>
</div>
<img src="https://s3.amazonaws.com/aws-website-pcbuilder-7szhn/PCBuilder.png" alt="PCmap" usemap="#pcmap" />
<map name="pcmap">
<area shape="rect" coords="220,160,270,208" atl="CPU"/>
</map>
</div>
</div>
</div>
</section>

我想让它这样，当用户悬停在地图区域时，它会显示一个div.

Answer 1

如果您使用Jquery，您可以使用hover()函数，否则您可以使用带有Javascript的mouseover和mouseout事件。

当map转到hoverin/mouseover时，您需要显示div，而当map转到huverout/mouseout时，您则需要隐藏div。因此，您需要添加一些css样式来在容器上执行div操作。