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

Here is my 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>

I would like to make it so when the user hovers over the map area it will display a div.

Solution

If you use Jquery you can use hover() function, else you can use mouseover and mouseout events with Javascript.

When map go to hoverin/mouseover you needs show the div and when map go to hoverout/mouseout you needs hide the div. So you needs add some css styles to do div appers over your container.