Show div on hover or click, and hide div as default

Question

I have a site with a map, and the map has different regions which can be hovedered and clicked, and what I want is that when I hover or click a region, there will be a div that appears on the page, with some content. I tried using the overflow:hidden; but that didn't seem to do the job, what is the right code to use or is it even possible?

The site is here for more understanding: http://iseeit.no/maptest/

There are two divs there with content allready, and at default these should be hidden, and when coming to the site and hovering og clicking a region, they should appear, not both, but the one that corresponds with the region, I split the divs apart from eachother so that tehy don't overlap.

The site is made up by jquery, css and html.

The div(css):

#vest-agder {
    background: #111;
    ...........
}

Jquery(if this helps):

;(function($){$.fn.cssMap=function(options){var s=$.extend({
    'size':'810',
'tooltips':false,
'tooltipArrowHeight':5,
'multipleClick':false,
'searchUrl':'search.php',
'searchLink':'',
'searchLinkVar':'region',
'clicksLimit':4,
'clicksLimitAlert':'Du kan bare velge %d region! || regioner!',
'cities':true,'visibleList':false,
'agentsListId':'addresses', 
'loadingText':'Laster inn kart ...',
'onHover':function(e){},
'onClick':function(e){},
'onLoad':function(e){}},

Hope you understand what I'm trying to ask here :)

UPDATE 1

Regions in the HTML:

<div id="map-norge">
 <ul class="norge">
  <li class="no2"><a href="#aust-agder">Aust-Agder</a></li>
  <li class="no19"><a href="#vest-agder">Vest-Agder</a></li>
 </ul>
</div>

Regions in the CSS:

.m810 .no2:hover .bg,
.m810 .no2.focus .bg,
.m810 .no2.active-region .bg{height:86px;left:82px;top:816px;width:72px}
.m810 .no2:hover .bg,
.m810 .no2.focus .bg{background-position:-1584px -72px}
.m810 .no2.active-region .bg{background-position:-1584px -432px}

.m810 .no19:hover .bg,
.m810 .no19.focus .bg,
.m810 .no19.active-region .bg{height:67px;left:70px;top:842px;width:52px}
.m810 .no19:hover .bg,
.m810 .no19.focus .bg{background-position:-767px -17px}
.m810 .no19.active-region .bg{background-position:-767px -377px}

You specified what you're trying to achieved and what you've done, but I don't see a question in there. — Shawn Chin, Jun 07 '12 at 11:39
@ShawnChin, Sorry, I totally forgot, here it is: What I want is that when I hover or click a region, there will be a div that appears on the page, with some content. I tried using the `overflow:hidden;` but that didn't seem to do the job, what is the right code to use or is it even possible? — Remi, Jun 07 '12 at 11:51
Overflow? What do you want with overflow, this is for the scrollbar. Maby you want to use display: none; ? And where do we find your jQuery? — Ron van der Heijden, Jun 07 '12 at 11:58
@Bondye updated with Jquery `'onHover':function(e){}, 'onClick':function(e){}, 'onLoad':function(e){}},` — Remi, Jun 07 '12 at 12:12

Christian Bekker · Accepted Answer · 2012-06-07T12:38:00.753

0

You want to make your divs Display:none; And make hover to change display of the divs you wanna show...

Fx:

#aust-agder { display: none; }
.no19:hover #aust-agder { display: block; }

Or with Jquery:

$(".no19").hover(function() {
$("#aust-agder").css({"display":"block"});
});

edited Jun 07 '12 at 12:38

answered Jun 07 '12 at 12:13

Christian Bekker

1,857
4
27
43

Seems to be the correct thing to do, but it didn't work... updated the topic with new information that might be useful for you :) – Remi Jun 07 '12 at 12:30
just added a jquery example aswell.. Havent testet – Christian Bekker Jun 07 '12 at 12:38
I tested the code and it worked! now what is needed is that I can click and when I move the mouse away i dissapears Check this page out and hover your cursor over the region at the bottom on the map http://iseeit.no/maptest/ – Remi Jun 07 '12 at 12:51

Show div on hover or click, and hide div as default

1 Answers1