1

我试图弄清楚是否有一种方法可以使用 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");
    });
});

这是显示结果的页面。出于安全目的，它不显示图像，但效果适用于空图像。:)

4

4 回答 4

1

对于纯 CSS 解决方案，您可能需要查看子选择器。

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

例如

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 解决方案。这有点脏，但这是可能的。

于 2013-06-18T16:31:56.850 回答
0

您可以通过定位做一些事情。让我们打破 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 中可以工作，但在其他浏览器中应该可以。

于 2013-06-18T16:34:27.007 回答
0

我知道您指定使用 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

于 2013-06-18T16:48:24.800 回答
-2

使用 JQuery：

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

第一个是mouse-in，第二个功能是mouse-out。

于 2013-06-18T16:31:55.603 回答