如何使 <div> 出现在图像的 <area> 上悬停答案

【问题标题】：How to make <div> appear upon hover over <area> of an image如何使 <div> 出现在图像的 <area> 上悬停
【发布时间】：2017-08-06 23:28:31
【问题描述】：

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

【问题讨论】：

标签： html css dictionary hover area

【解决方案1】：

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

当地图进入悬停/鼠标悬停时，您需要显示 div，而当地图进入悬停/鼠标悬停时，您需要隐藏 div。所以你需要添加一些 css 样式来在你的容器上做 div appers。

【讨论】：