9

I have a div with a classname "test". The class "test" has a cursor pointer assigns to it. The class also has a fixed width of 200px. Inside the div is text of length that is shorter than the width of the div. I don't want the point to appear when the mouse is placed in the blank part of the div.

Is there a way that I can assign the css pointer to the text inside the div without wrapping the text inside another <span> tag. I just don't want to go back and add the span tag to every single div and rewrite the javascript.

I am thinking of something like this pseudo css code

.test.text {
  cursor:pointer;
}
gsamaras
  • 69,751
  • 39
  • 173
  • 279
Jamex
  • 1,134
  • 5
  • 22
  • 33

2 Answers2

19

CSS doesn't work this way. As biziclop says in the comments, text nodes can't be selected with CSS. You'll either have to wrap your text in a <span> and use

.test span {
    cursor: pointer;
}

With

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

Or set .test to display: inline, but that won't let you give it a width, which is not the behaviour you want. <span>s are fine, in this case.

Community
  • 1
  • 1
Bojangles
  • 96,145
  • 48
  • 166
  • 203
  • 3
    Text nodes cannot be selected with css: http://stackoverflow.com/questions/5688712/is-there-a-css-pseudo-selector-for-text-nodes-elements – biziclop Oct 16 '11 at 22:13
  • @biziclop Thanks. Edited into my answer. – Bojangles Oct 16 '11 at 22:15
  • I don't think making `.test` display inline works here. It has to have the 200-pixel width. – BoltClock Oct 16 '11 at 22:21
  • Thanks guys, I did try to go back and added spans to my texts, but I don't still remember all the different functions that effect the code, so I weighted the benefit of spending time to pretty up the UI vs the cost of spending hours testing for this. I am still weighing my decision. – Jamex Oct 16 '11 at 23:01
1

You could try using the :before or :after pseudo-elements.

I was playing with this solution, for 1-line divs:
http://jsfiddle.net/yAfKw/

Multi-line divs:
http://jsfiddle.net/yAfKw/1/

Works in Firefox, does not work in Safari.

biziclop
  • 14,123
  • 3
  • 47
  • 64
  • Thanks biziclop, this is a great trick that could solve my problem, I will test it out. – Jamex Oct 16 '11 at 23:03