7

I am trying to have the cursor change when the user hovers over the text of my div rather than the div itself. I currently have : 

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div:hover {
  cursor: pointer
}
<div>
  Hello
</div>

Is there a way for me to somehow select just the text of a div and apply a hover effect on just the text itself.

Pipeline
  • 1,029
  • 1
  • 17
  • 45

3 Answers3

5

Since you can't select text nodes in the CSS, you would have to wrap it in order to select it.

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div span:hover {
  cursor: pointer;
}
<div>
  <span>Hello</span>
</div>

However, if you want a work-around, you could add the text via a pseudo element like this:

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div:after {
  content: 'Hello';
  cursor: pointer;
}
<div></div>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Was hoping to not use but I guess if that is all there is. Thanks – Pipeline Jan 02 '16 at 01:27
  • @Pipeline You can use same CSS posted in this answer and add the span via javascript – Mi-Creativity Jan 02 '16 at 01:30
  • @Pipeline I just added an alternative work-around.. it's clearly not ideal, and it definitely won't work in all cases, but you could always use a pseudo element. – Josh Crozier Jan 02 '16 at 01:31
  • Thanks, can accept the answer is 6 minutes – Pipeline Jan 02 '16 at 01:31
  • How can I select the text in the span using JQuery? – Pipeline Jan 02 '16 at 02:29
  • @Pipeline If you want to select the text node and wrap it with a `span`, you could use `$('div').contents().wrap('');`... that will work based on the markup you provided, although the `div` selector is too generic. You should add a class or id to the element in order to target it.. (but you probably already know that...). – Josh Crozier Jan 02 '16 at 02:34
  • @Pipeline you'll need a `.class-name` or an `#id` on that parent div so you can target it by that, otherwise it would be too generic – Mi-Creativity Jan 02 '16 at 02:36
  • @Pipeline `$('div').wrapInner('');` would work as well. – Josh Crozier Jan 02 '16 at 02:39
  • With regard to your `after` solution, the OP wants to change the cursor on hover; will your solution work that way? –  Jan 02 '16 at 05:40
2

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div p {
  cursor: pointer;
}
<div>
<p>Hello</p>
</div>
Pooja Khokhani
  • 31
  • 8
1

Put the text into a 'p' tag then apply the hover to that instead

Ian
  • 11
  • 3
  • `p` tag adds padding, `span` suits this case much better – Mi-Creativity Jan 02 '16 at 01:29
  • @Mi-Creativity Not really. HTML only defines the document structure instead of styling. Using unmeaningful tags such as `` and `
    ` is discouraged unless it's necessary.
     – Derek 朕會功夫 Jan 02 '16 at 01:55
  • @Derek朕會功夫 I agree about using `div` and `span` as last resort, but for the `p` tag >> "The HTML

    element (or HTML Paragraph Element) represents a *paragraph* of text. *Paragraphs* are usually represented in visual media by *blocks of text *that are *separated* from adjacent blocks by *vertical blank space or first-line indention*."

     – Mi-Creativity Jan 02 '16 at 02:25
  • While the `span` >> "The HTML element is a *generic inline container* for phrasing content, which does not inherently represent anything. It can be used to group elements *for styling purposes* (using the class or id attributes)" – Mi-Creativity Jan 02 '16 at 02:26
  • @Mi-Creativity Yes, the docs is saying that the `

    ` tag should be used for paragraph purposes that are expected to be separated from adjacent blocks. However it does not specify that it will add any padding (you can undo any padding added by the user agent anyway.)

     – Derek 朕會功夫 Jan 02 '16 at 02:27
  • Sure you can, as you can eliminate `ul` padding, but `p` is for *blocks of text* and it is a *block* element, while `span` is *inline* and could be used for styling purposes , also kindly look at the example here https://developer.mozilla.org/en/docs/Web/HTML/Element/span which used span for styling only – Mi-Creativity Jan 02 '16 at 02:32