0

私はこのように機能する単純なCSS画像マップを持っています：

HTML:
<div style="display:block; width:791px; height:1022px; background:url(images/image.jpg); position:relative; margin:2px auto 2px auto;">
<div><a class="imagemaplink" style="left:112px; top:564px; background:transparent; display:block; width:336px; height:0; padding-top:29px; overflow:hidden; position:absolute;" title="Image1" href="#"></a></div>
………


CSS:
a.imagemaplink:hover{background:transparent; border:1px solid black; color:black;}

これはうまく機能しますが、ホバーしたときにリンクの左側にポインター画像を追加したいと思います。ポインタ画像はリンクにすることができますが（関係ありません）、ユーザーがホバーしたときにこのリンクが境界線から離れないようにします。例えば：

私がやりたいこと

これを行うための効率的な方法は何ですか？どうもありがとう。

4

1 に答える 1

1

ここでライブデモンストレーションを行いました：http： //jsfiddle.net/5abv6/

例として、画像の代わりに背景色を使用しました。

しかし、私がしたことは、HTMLで3つのリンクを設定することでした。

    <a href="#" class="main-link"><span class="pointer">
        <!-- img of finger could go here or make it background in css --></span>
        <span class="border">Link 1</span>
    </a>
    <a href="#" class="main-link">
        <span class="pointer"></span><span class="border">Link 2</span>
    </a>
    <a href="#" class="main-link">
        <span class="pointer"></span><span class="border">Link 3</span>
    </a>

そしてそのCSS（20px x 20pxの画像ポインタ画像に基づく-それに応じて調整）

a.main-link {display:block; height:30px; width:150px; margin-bottom:5px;}

a.main-link .border {
    margin-left:40px;
    display:block;
    height:30px;
    width:105px;
    padding-left:5px; /* margin-left + width + padding-left = width of .main-link */
}

a.main-link:hover .border {border:1px solid #000;}
a.main-link:hover .pointer {
    display:block;
    background:url(yourpointerimage.jpg) no-repeat 0 0;
    width:20px;
    height:20px;
    float:left;
    margin-top:5px;
    margin-left:10px; /* I just added some margins to center it more to the link */
}

スパンclass="pointer"は、ポインタ画像が表示される場所です。スパンclass="border"は、ホバーされたときにリンクの周囲に境界線を配置するものであり、すべてがタグ内にあるため、いずれかがホバーされたときに、境界線とポインターが適切に表示されます。

または、HTMLの<span class="pointer"> </span>AndとCSSの間に画像を配置することもできます.pointer {display:none;}が、ホバーするとa.main-link:hover .pointer {display:block;}

于 2012-10-27T00:49:55.660 に答える