Pipeline Pipeline - 4 years ago 74
HTML Question

Selector for just the text of a div?

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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download