0

プロジェクトの要件が前回の投稿から変更されました。

これで、画像を含む div と、その上に重ねられたコンテンツ (リンク付きのテキスト) ができました。内容物は画像と同じ寸法です。私の問題は、画像に割り当てられたリンクをクリックできないことです。これは、コンテンツがバックグラウンド リンクを隠しているためだと思います。

http://jsfiddle.net/2mjne/1/

HTML

<div class="ad">
    <img src="http://www.placekitten.com/320/200">
    <a href="#">  
        <div class="content">
             text
             <a class="link" href="">link</a>
        </div>
    </a>
</div>

CSS

.ad {
    position: relative;
    height: 200px;
    width: 320px;
}
.content {
    position: absolute;
    top: 0;
    height: 200px;
    width: 320px;
}
.link {
    visibility: hidden;
}

JS

$(document).ready(function() {
    $('.content').mouseover(function() {
        $(this).find('.link').css('visibility', 'visible');
    });
    $('.content').mouseout(function() {
        $(this).find('.link').css('visibility', 'hidden');
    });
    $('a').click(function() {
        console.log('a clicked');
    });
    $('.link').click(function() {
        console.log('button clicked');
    });
});

編集:私のモジュールには 2 つの異なるリンクがあります。1 つのリンクは背景画像からのもので、もう 1 つのリンクは にあるaタグからのもの.classです。

4

3 に答える 3

2

リンクが画像に割り当てられていません...開始タグを：の前に移動してimgください

<div class="ad">
    <a href="#">
        <img src="http://www.placekitten.com/320/200" />                
        <div class="content">              
            text              
            <a class="link" href="#">link</a>        
        </div>     
    </a> 
</div>
于 2012-10-16T18:41:15.297 に答える
0

これは私のソリューションです。私が持っている唯一の問題は、「meow」の左側のテキスト領域にマウスを置き、「my」という単語の下にあることです。背景リンクではなく、テキストリンクの領域にまだいることに気付くでしょう。これは、テキスト リンクがまだこのスペースを管轄しているためです。私はそれを取り除く方法を理解しようとしています。

http://jsfiddle.net/WHpMr/

ここに画像の説明を入力

于 2012-10-16T22:34:39.957 に答える
0

画像の上のテキスト領域が画像と同じサイズの場合、マウスは画像に到達できないため、ユーザーとマウスの組み合わせに対するリンクは存在しません。

また、ユーザーは単語間の空白でリンクが変更されることを期待していないため、テキスト リンクは期待どおりに機能するはずです。

したがって、ソリューションは次のようになります。

マウスのクリックを検出し、押されたときに、宛先ごとに 1 つずつ、2 つのオプションと簡潔で明確な説明をユーザーに提示します。珍しい方法ですが、うまくいきます。

すべての隠しリンクとキーボード アクセスに言及して、何らかの凡例をページに表示します。accesskey 属性と JS を使用して、それを機能させることができます。

さよなら

于 2012-10-17T00:37:47.557 に答える