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

Question

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

有什么建议吗？

谢谢

对于你们缺乏代码，我深表歉意。

这是我用来创建一些简单叠加层的 div。只是一些色 block 。

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

已修复 我必须做的是一个脚本，因为它变得很难用 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 解决方案。这有点脏，但这是可能的。