2011-10-16 9 views
7

私はクラス名が "test"のdivを持っています。クラス "test"にはカーソルポインタが割り当てられています。クラスの幅も200pxに固定されています。 div内には、divの幅よりも短い長さのテキストがあります。マウスがdivの空白部分に置かれたときにポイントが表示されないようにします。div内のテキストを選択するCSSクラスセレクタ

他の<span>タグ内にテキストをラップすることなく、div内のテキストにCSSポインタを割り当てることができる方法はありますか?私はちょうど戻ってすべての単一のdivにスパンタグを追加し、JavaScriptを書き直したいとは思わない。

私はこの擬似CSSコードこのように動作しません

.test.text { 
    cursor:pointer; 
} 

答えて

12

CSSのようなものを考えています。コメントでは、biziclopが言うように、text nodes can't be selected with CSS。あなたは<span>にテキストをラップし、

<div class="test"> 
    <span>Text</span> 
</div> 

それともdisplay: inline.testを設定すると

.test span { 
    cursor: pointer; 
} 

を使用する必要がありますどちらか、それはあなたがそれをでない幅を与えてみましょうではないだろうあなたが望むふるまい。この場合、<span>は問題ありません。

+3

Textノードは、CSSを選択することはできません。 http://stackoverflow.com/questions/5688712/is-there-a-css-pseudo-selector-for-text-nodes-elements – biziclop

+0

@biziclop感謝。私の答えに編集。 – Bojangles

+0

'.test'インライン表示はここでは動作しないと思います。それは200ピクセルの幅を持たなければならない。 – BoltClock

1

:beforeまたは:after疑似要素を試すことができます。私は、このソリューションで遊んでいた

は、1行のdivのために:
http://jsfiddle.net/yAfKw/

マルチラインのdiv:Firefoxで
http://jsfiddle.net/yAfKw/1/

作品、Safariで動作しません。

+0

ありがとうbiziclop、これは私の問題を解決できる素晴らしいトリックです、私はそれをテストします。 – Jamex