使用CSS懸停類將鼠標懸停在鏈接上並在頁面上的其他位置顯示覆蓋圖像

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

已修正因為腳本很難用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");
    });
});

這是顯示結果的頁面 。 為了安全起見，它不會顯示圖像，但是效果適用於空白圖像。 :)

Answer 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解決方案。 這有點臟，但是有可能。

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通過獲取其索引來確定要懸停的鏈接。 然后jQuery獲取該索引並找到具有相同索引的圖像，並向其添加.active類。 因此，無論項目有多大以及您擁有多少鏈接和圖像，它都可以擴展到任何大小的項目。
幻燈片使用相同的概念。

這是一個實際的例子： http : //codepen.io/anon/pen/nCDhG

Answer 4

使用JQuery：

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

第一個功能是將鼠標移入，第二個功能是將鼠標移出。