Question

我试图弄清楚是否有办法使用CSS将鼠标悬停在链接上，并在页面的其他位置显示图像的叠加层。我正在制作一个有地图的网站，我想要完成的是，当他们将鼠标悬停在相应位置的链接上时，地图会突出显示他们正在悬停的位置，以便更好地了解在哪里，而不是必须搜索它。我现在得到的是，我必须将鼠标悬停在图像上的位置，然后我得到效果，但是当我将鼠标悬停在链接上时，我想要效果。

有什么建议吗？

谢谢

我为你们缺乏代码而道歉。

以下是我用来创建一些简单叠加层的div。只是一些颜色块。

<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>

这是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 我需要做的是一个脚本，因为它很难用HTML和CSS定位。我在我的HTML中使用了data-overlay标签。

 <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脚本：

  $(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");
    });
});

这是page showing the result。出于安全考虑，它不显示图像，但效果适用于空图像。：）

Answer 1

对于仅限CSS的解决方案，您可能需要查看child selectors。

这将允许您将鼠标悬停在父级上并显示该子级。

例如

HTML

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

CSS

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

基于提供的代码的想法：http://jsfiddle.net/derekstory/nDyWF/1/

正如其他人所提到的，您可能更适合使用JS / Jquery解决方案。这有点脏，但有可能。

Answer 2

你可以做一些定位的东西。让我们打破ASCII艺术：

<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;
}

我认为a:hover span不会在IE 6中运行，但它应该在其他浏览器中运行。

Answer 3

我知道你指定使用css来解决这个问题，但是使用JS（jQuery）会使得大型项目的答案更加灵活。

<强> 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>

这为我们设置了一个模板，用于显示指定的图像。当用户将鼠标悬停在链接上时，将显示相应的图像。

<强> CSS

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

这只是设定了一些基本定位。 .active是将应用于当前图像的类。它会将显示从none更改为block。的的jQuery

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

这就是魔术发生的地方。当用户将鼠标悬停在链接上时，jQuery会通过获取index来确定哪个链接悬停。然后jQuery获取该索引并找到具有相同索引的图像，并将类.active添加到其中。因此，无论项目有多大以及您拥有多少链接和图像，它都可以扩展到任何大小的项目幻灯片显示了相同的概念。

以下是此操作的示例：http://codepen.io/anon/pen/nCDhG

Answer 4

使用JQuery：

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

第一个是鼠标 - 第二个功能是鼠标输出。

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

4 个答案:

CSS