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"是悬停时在链接周围放置边框的原因，并且所有边框都在 a 标签中，因此当其中任何一个悬停时，边框和指针会适当显示。

或者，您可以将图像放在 HTML 中的<span class="pointer"> </span>And 在 CSS之间，.pointer {display:none;}但在悬停时a.main-link:hover .pointer {display:block;}

于 2012-10-27T00:49:55.660 回答