CODEWITHSUNDEEP
htmlcss
pythonian 23
pythonian 23

Reputation: 395

Make CSS apply to individual words?

If I have a CSS class that changes the color when you hover your mouse over an element, how do I make it change only the word hovered on without making each word a separate element? Is there a way to do this or is it impossible without using separate tags?

.change:hover {
  color: red;
}

temp {}
<h1>Current situation</h1>
<p class="change">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h1>Desired output(without the individual tags)</h1>
<p>
  <temp class="change">Lorem </temp>
  <temp class="change">ipsum </temp>
  <temp class="change">dolor </temp>
  <temp class="change">sit </temp>
  <temp class="change">amet, </temp>
  <temp class="change">consectetur </temp>
  <temp class="change">adipiscing </temp>
  <temp class="change">elit, </temp>
  <temp class="change">sed </temp>
  <temp class="change">do </temp>
  <temp class="change">eiusmod </temp>
  <temp class="change">tempor </temp>
  <temp class="change">incididunt </temp>
  <temp class="change">ut </temp>
  <temp class="change">labore </temp>
  <temp class="change">et </temp>
  <temp class="change">dolore </temp>
  <temp class="change">magna </temp>
  <temp class="change">aliqua.
</p>

Upvotes: 0

Views: 98

Answers (1)

Deeksha Gupta
Deeksha Gupta

Reputation: 317

There is no tag name with temp either you can use span on div.

.change:hover{
  color:red;
}
<h1>Current situation</h1>
<p class="change">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h1>Desired output(without the individual tags)</h1>
<p>
  <span class="change">Lorem </span>
  <span class="change">ipsum </span>
  <span class="change">dolor </span>
  <span class="change">sit </span>
  <span class="change">amet, </span>
  <span class="change">consectetur </span>
  <span class="change">adipiscing </span>
  <span class="change">elit, </span>
  <span class="change">sed </span>
  <span class="change">do </span>
  <span class="change">eiusmod </span>
  <span class="change">tempor </span>
  <span class="change">incididunt </span>
  <span class="change">ut </span>
  <span class="change">labore </span>
  <span class="change">et </span>
  <span class="change">dolore </span>
  <span class="change">magna </span>
  <span class="change">aliqua.</span>
</p>

Upvotes: 1

Related Questions