1

簡単な JQuery 要素セレクターがあります。ご想像のとおり、要素の内外に移動すると、いくつかの強調表示が行われます。それは機能しますが、私は2つの問題に直面しています.助けてください.

1）隣接する要素は、隣接する要素の強調表示を隠すことがあります（DIVこのフィドルDIVの1を参照してください-隣接する要素に触れていないものだけでなく、1の4つの側面すべてに赤い影を表示したいですDIV-私もを追加しようとしましたz-indexが、解決しません）

2) 要素にアンカー リンクが含まれている場合、単語が複数の行に折り返されるテキストが含まれている場合、テキストの各行が強調表示されDIVます。 3 行にまたがるリンク - 3 つの赤いシャドー ボックスではなく、リンク全体を 1 つのシャドー ボックスで囲むことはできますか?

注: 私はこのコードをさまざまなサード パーティの Web ページの上で使用しているため、スケーラブルな方法で HTML を変更/編集することはできません。

編集：

以下に回答してくれた人に感謝します-あなたのソリューションは私のフィドルデモで機能しました-これらを実際のコードに取り入れましたが、それらの上にカーソルを置いたときに画像を「前面に出す」ことができません-多くの画像がまだホバー シャドウが 4 辺未満にしか表示されない - 私のコードは次のとおりです (ただし、php が必要です):

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        img:hover{
            -webkit-box-shadow: 0 0 17px 10px green;
            -moz-box-shadow: 0 0 17px 10px green;
            box-shadow: 0 0 17px 10px green;
            z-index:5555555555;
            position:relative;
        }
</style>
</head>

<body>
<?php 
    echo'<div>';
             $url = 'http://www.guardian.co.uk';
             $data = file_get_contents($url);
             echo $data;
    echo'</div>';
    ?>
</body>
</html>
4

2 に答える 2

2

質問1-下端が2番目のボックスの下にあるため、3つの側面にのみ境界線が表示されます。このように前面にポップします-これにより、ホバーしたときに兄弟のdivが実際に前面に表示されます

div:hover {z-index:5; position:relative;}

質問2-リンクをに設定します

display:block;

あなたのフィドルへの私の更新を参照してください

http://jsfiddle.net/FusrG/9/

于 2012-09-17T12:13:44.717 に答える
1

まず、:hoverCSS で擬似セレクターを使用しないのはなぜでしょうか?

div:hover, a:hover
{
    -webkit-box-shadow: 0 0 17px 10px #f51f4c;
  -moz-box-shadow: 0 0 17px 10px #f51f4c;
  box-shadow: 0 0 17px 10px #f51f4c !important;
}​

JS を使用して、CSS に組み込まれていることを行う代わりに?

必要に応じて表示するには、.topdiv に位置と z-index をdisplay: inline-block;指定し、期待どおりにリンクをラップするようにアンカーに追加する必要があります。

.sky a
{
    display: inline-block;
}

http://jsfiddle.net/Kyle_Sevenoaks/FusrG/7/

CSS ホバーを使用して影を修正する: http://jsfiddle.net/Kyle_Sevenoaks/FusrG/11/

于 2012-09-17T12:10:01.357 に答える