5

重複の可能性:
この CSS テキスト装飾の問題を機能させるにはどうすればよいですか?

jquery トグル効果を使用して、リスト要素に関する詳細情報を表示または非表示にしています。

jQuery(document).ready(function($) {
    $("ul p").hide();
    $("ul li").addClass("link");
    $("ul li").click(function () {
    $("p", this).toggle(300);
    });
});

次のような構造で問題なく動作します。

<ul>
<li>List element 1<p>Additional info 1</p></li>
<li>List element 2<p>Additional info 2</p></li>
</ul>

「クリック可能」に見えるようにするために、.link を css でスタイリングしています。

ul li.link {
    color: #0066AA;
}

ul li.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

しかし、表示されるテキストをリンクのように見せたくないので、次のようにします。

ul li.link p{
    color: black;
    text-decoration: none;
}

ul li.link p:hover {
    cursor: text;
    text-decoration: none;
}

ただし、<p>text-decoration:none; をスローしても、ホバー時に下線が引かれます (青色)。あらゆるフリースペースに！私が理解していることから、これは子スタイルが親の上に適用されているためです。私が効果的に行っているのは、下線の上に「何も」を配置して非表示にしようとすることです。

だから私の質問は（最終的には！）これです：（他の理由でやりたくない）を<p>外さずにその下線を取り除く方法はありますか？<li>

4

1 に答える 1

5

マークアップを制御できますか？の中にテキストをラップし、スパンだけをターゲットにするCSSを記述し<li/>ます。<span/>text-decoration:underline;

実際には、クリック可能な領域は<a/>「＃」のhrefを持つ要素である必要があります。liの代わりにクリックハンドラーをアンカーにバインドします。次に、a：visitedのような疑似セレクターを追加して操作し、クリックの動作を文書化します。p:hover実際にCSSで動作するかどうかはわかりません。jQueryを使用して任意の要素にバインドできることは知っていますが、CSSを使用する場合はアンカー要素を使用します。

于 2010-10-06T04:04:02.470 に答える