使用CSS悬停类将鼠标悬停在链接上并在页面上的其他位置显示覆盖图像

Question

I was trying to figure out if there was a way to use CSS to hover over a link and make an overlay of an image show elsewhere on the page. I am making a website that has a map, and what I want to accomplish is that when they hover over a link to the corresponding location the map would sort of highlight the location of what it is they are hovering over to get a better understanding of where the place is and not have to search for it. What I am getting now is that I have to hover over the location on the image and then I get the effect but I want the effect when I hover over the link.

Any suggestions?

Thank you

I apologize for the lack of code you guys.

Here are the divs that I am using to create some simple overlays. Just some color blocks.

<div class="roomOverlay blue" id="conf_sanchez"></div>
    <div class="roomOverlay red" id="conf_CIO"></div>
    <div class="roomOverlay green" id="conf_10F"></div>
    <div class="roomOverlay brown" id="Fuster"></div>

and here is the css

.blue:hover { background-color: Blue; }
.red:hover { background-color: red; }
.green:hover { background-color: green; }
.brown:hover { background-color: brown; }

#conf_sanchez {
height: 104px;
width: 96px;
left: 876px;
top: 14px;}

#conf_CIO {
height: 146px;
width: 69px;
left: 7px;
top: -92px;}

#conf_10F {
height: 67px;
width: 115px;
left: 194px;
top: 193px;}

#Fuster {
height: 139px;
width: 129px;
left: 180px;
top: -17px;}

FIXED What I had to do was a script since it became difficult positioning with the HTML and CSS. I used the data-overlay tag in my HTML as so.

 <dl> <dt><a href="#" **data-overlay="#Fuster"**>Fuster Conference Room - W Side behind small break room</a></dt>
        <dd>-Projector</dd>
        <dd>-Computer</dd>
        <dd>-Polycom</dd>
        <dd>-Seats 8-10 people</dd>
        <dd>-4 White Boards</dd>
    </dl>

JQuery Script:

  $(function () {
    $('.roomOverlay').css("visibility", "hidden");
    $('a').hover(function () {
        var overlay = $(this).data("overlay");
        $(overlay).css("visibility", "visible");
    }, function () {
        var overlay = $(this).data("overlay");
        $(overlay).css("visibility", "hidden");
    });
});

Here is the page showing the result for it. It does not show image for security purposes but the effect works on the empty image. :)

Answer 1

For a CSS-only solution, you may want to look into child selectors .

This will allow you to hover over the parent and show the child.

For instance

HTML

<div id="parent">
   <div id="child">
   </div>
</div>

CSS

#parent { properties }
#child {properties; height: 0}
#parent:hover > #child { height: 200px; properties}

Idea based off of provided code: http://jsfiddle.net/derekstory/nDyWF/1/

As others have mentioned, you may be better suited with a JS/Jquery solution. This is a bit dirty, but it is possible.

Answer 2

You could do some stuff with positioning. Let's break out the ASCII art:

<div>
------------------------------------------------------
|                             |    <img class="map"> |
|  <a>This is link            |                      |
|     <span>Overlay</span>    |                      |
|  </a>                       |                      |
|                             |                      |
|  <a>This is another link    |                      |
|     <span>Overlay</span>    |                      |
|  </a>                       |                      |
|                             |                      |
------------------------------------------------------
</div>

CSS

div {
    position: relative;
}

div img,
div a span {
    position: absolute;
    top: 0;
    right: 0;
}

div img {
    z-index: 5;
}

a span {
    display: none;
    z-index: 10;
}

a:hover span {
    display: block;
}

I don't think a:hover span will work in IE 6, but it should do in other browsers.

Answer 3

I know you specified using css for this problem, but using JS(jQuery) will make the answer more flexible for larger projects.

HTML

<img class="image" src="http://media-cdn.tripadvisor.com/media/photo-s/00/1d/3d/32/new-york-city.jpg">
<img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRCk4R8uFRe5EnqH9KrV3u-K1VcCp3y_qSG8vezNG5uSX7G-FMHvQ">
<img class="image" src="http://images1.fanpop.com/images/image_uploads/New-York-City-new-york-1020054_1024_768.jpg">
<img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSF_1ueOgxtgkT8HFuwO3f3K5fEtUxJtC-IICVWYcXJkchmgT1c">
<div class="links">
<a href="#" title="Example link!">Option 1</a> 
<a href="#" title="Example link!">Option 2</a> 
<a href="#" title="Example link!">Option 3</a> 
<a href="#" title="Example link!">Option 4</a> 
</div>

This sets up a templete for us to display the images specified. When the user hovers over a link, the corresponding image will display.

CSS

img.image {
  position: relative;
  top: 0;
  left: 0;
  display: none;
  width: 300px;
}
img.active {
  display: block;
}
.links {
  position: absolute;
  bottom: 0;
}

This just sets some basic positioning. The .active is the class that will be applied to the current image. It will change the display from none to block . jQuery

$(function() {
  $('a').hover(function() {
    var item = $('a').index(this);
    $('.image').removeClass('active');
    $('.image').eq(item).addClass('active');
  });
});

This is where the magic happens. When the user hovers over a link, jQuery determines which link is hovered by taking its index . Then jQuery takes that index and finds an image with the same index and adds the class .active to it. Therefore, no matter how large a project is and how many links and images you have, it is scalable to whichever size project.
The same concept is used by slideshows.

Here is an example of this in action: http://codepen.io/anon/pen/nCDhG

Answer 4

Use JQuery:

$("#link1").hover(
  function () {
    $('#map1').show();
  },
  function () {
    $('#map1').hide();
  }
);

The first is mouse-in the second function is mouse-out.