4

私の目的は、クリック可能なテキスト コンテンツを表示し、領域全体を変更するホバーがあり、div またはテキスト全体がロールオーバーされたときに飛び散らない領域を作成することです。cssでやりたい。

たとえば、500 x 500 px の div が必要です。この div の内部には、クリック可能にする必要がある p と a があります。正常に動作します。何かのようなもの：

<div style="width:500px; height:500px;">
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

そして、最初のdiv全体をカバーするロールオーバー（ホバー）機能を備えたdivを一番上に置き、透明度が0.0に設定されているときにロールオーバーされるまで、透明な色でdiv全体をぼやけさせ、消えたように見えます. しかし、最初の div からのリンクをクリック可能にしたい (これを行うには、この 2 番目の div を指定しますpointer-events:none)。このコード* を最初の div 内に配置すると、合計で次のようになります。

<div style="width:500px; height:500px;">
*<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

css クラスによるスタイリング:

div.divhover { 
    background-color: hsla(0, 100%, 100%, 0.5); }
div.divhover:hover {
    background-color: hsla(0, 100%, 100%, 0.0); 
    pointer-events: none; }

がないpointer-events:none場合、これは通常のホバー機能のように機能します。マウスが div 領域にない場合、透明度 0.5 の白いレイヤーがあります。マウスがその上にある場合、透明度は 0.0 で、覆われていないかのように見えます。ただし、これでは、テキスト要素とリンク要素をクリックすることはできません。

ではpointer-events:none、テキストとリンクをクリックできますが、カーソルが p または a 要素の上にあるとホバーが非アクティブになります。これにより、カーソルが動き回るとdiv全体が飛び出し点滅し、カーソルがリンク上にある場合は急速に点滅します! これはいらない！

css/html のノウハウをたくさん持っている皆さんが私を助けてくれることを願っています (私はあまり知りません)。ここまでたどり着く前に、最初の div のテキストとリンクをクリックできるように設定z-index:-1してみました。.divhover:hoverまたposition:absolute、2 番目の div をページから移動してみました ( left:2000px)。で同じことを行う方法が異なるだけなので、これらはどちらも同じ状況になりましたpointer-events。

点滅を確認できるjsfiddleは次のとおりです。

http://jsfiddle.net/6wU8X/

ここではわかりませんが、 を取り出すpointer-events:noneと、リンクとテキストはクリックできなくなります。

4

2 に答える 2

1

CSSでこれを行う方法が思いつきません。JavaScript と jQuery を使用する場合、誰も CSS ソリューションを思い付かない場合のフォールバックを次に示します。

親 div にクラスを追加します。

<div class="parent" style="width:500px; height:500px; background-color:#ccc; color:#333;z-index:10">

<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>

    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

jqueryをインクルードし、次のスクリプトを追加します。

 $(document).ready(function(){

    $(".divhover").mouseover(function(){
        console.log("Over");
        $(this).hide();
        }
    );

    $(".parent").mouseleave(function(){
        console.log("out");
       $(".divhover").show(); 
    });

});

ここで実際に見てください：http://jsfiddle.net/6wU8X/2/

ただし、誰かが CSS ソリューションを思い付くことを願っています!

于 2014-02-07T05:31:29.857 に答える