2

我有一张有链接的图片。然后我有一个内联对齐的圆形子弹图像，它们放置在带有链接的父图像上。当用户尝试点击子弹时，有时他们可能会错过一小段距离并意外点击图片链接（不是子弹）。所以我希望项目符号之间的那些空白根本没有链接，但它们仍然有来自背景的链接。

代码是基本的，像这样： 

<ul class="bullets2" style="position:relative;bottom:25px;left:50px">
    <li><a href="javascript:alert('CLICK BULLET')"></a></li>
    <li><a href="javascript:alert('CLICK BULLET')"></a></li>
    ...
</ul>

还有 CSS 样式，您可以查看代码示例。

下面的图片展示了我想要实现的目标。 在此处输入图像描述

这里是 jsFiddle：http: //jsfiddle.net/RCkFL/

更新

没有一个解决方案有效，所以我<map>结合使用<area>创建多边形热点解决了我的问题。无论如何，感谢所有答案，我希望有人仍然会为我的原始问题提出解决方案，因为 CSS 方法要好得多。谢谢。

4

4 回答 4

1

我会在图像上放置带有项目符号的 a 并给该 div 一个填充（以获得更多“非href”空间。

没试过，但应该可以。

于 2012-11-08T14:46:23.100 回答
0 
ul.bullets2 {

    width: 400px;
    padding: 0px;
    margin: 0;
    display: inline;

}

ul.bullets2 li a {

    background: url('http://s16.postimage.org/46ceaxz2p/bullet.png') no-repeat;
    padding: 0px 8px;

}
于 2012-11-20T08:58:26.603 回答
0

类似于 3dgoo 的帖子，但略有不同；）

为图像添加填充，将它们设置为块，并将 'li' 设置为 inline-block - 在不触发图像点击的项目之间将有 1 个字符的空间。

ul.bullets2
{
    width:400px;
    padding: 0px;
    margin: 0;
}

ul.bullets2 li{
    display:inline-block;
}

ul.bullets2 li a {
    display:block;            
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat top center;
    padding:3px;
    width:16px;
    height:16px;
}

ul.bullets2 li a:hover, ul.bullets2 li a.selected
{
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat center middle;
    width:16px;
    height:16px;
}​

jsfiddle：http: //jsfiddle.net/ev5q8/

于 2012-11-08T14:51:08.033 回答
0

如果您在环绕项目符号的 li 标签中添加一些填充，这应该会阻止下面的图像链接。

CSS

ul.bullets2
{
    width:400px;
    padding: 0px;
    margin: 0;
    position: relative;
    bottom:40px;
    left:50px
}

ul.bullets2 li {
    float: left;
    padding: 10px;
}

ul.bullets2 li a {
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat;
    display: block;
    width:16px;
    height:16px;
}

ul.bullets2 li a:hover, ul.bullets2 li a.selected
{
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat;
    width:16px;
    height:16px;
}

演示

于 2012-11-08T14:48:04.873 回答