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

画像に箇条書きで を配置し、その div にパディングを与えます (「非 href」スペースを増やすため)。

試していませんが、動作するはずです。

于 2012-11-08T14:46:23.100 に答える
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 に答える
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」をインライン ブロックに設定します。画像のクリックをトリガーしない項目の間に 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 に答える