Html 如何制作<；部门>；出现在悬停在<；面积>；影像

这是我的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。

如果您使用Jquery可以使用hover（）函数，否则您可以将mouseover和mouseout事件与Javascript一起使用

当map转到hoverin/mouseover时，需要显示div；当map转到hoverout/mouseout时，需要隐藏div。因此，需要添加一些css样式，以便在容器上显示div