如何使 <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()函数，否则你可以使用 mouseover 和 mouseout 事件 Javascript.

当地图转到 hoverin/mouseover 时，您需要显示 div，当地图转到 hoverout/mouseout 时，您需要隐藏 div。所以你需要添加一些 css 样式来在你的容器上做 div appers。

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

How to make <div> appear upon hover over <area> of an image

html

css

dictionary

area

hover