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

この問題に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();
  }
);

1 つ目はマウスイン、2 つ目はマウスアウトです。

于 2013-06-18T16:31:55.603 に答える