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上传。

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

1 个答案: