CODEWITHSUNDEEP
htmlcss
Thor Solutions
Thor Solutions

Reputation: 49

Change textcolor on hover over other word

How can I change the textcolor of word A when the user hovers over word B? E.g. when the user hovers over the h1 "My name is", the text of the other h1 "Paul" should change to white.

Any solutions for this issue? Thanks in advance!

Update: I want the text "Not a" and "but here for them." to become white when the user hovers over the word restaurant and the word "restaurant" should become red. The second part (that "restaurant" becomes red) works fine, but the first part doesn`t work

This is the code im using:

.headingRestaurant:hover textb {
  color: blue;
}

.headingRestaurant:hover {
  color: red;
}
<h1 class="textb">Not a <span id="heading1" class="headingRestaurant">restaurant</span>, <br> but here for them.</h1>

Upvotes: 3

Views: 203

Answers (4)

bron
bron

Reputation: 1558

It matters if the words are in 1 header or in 2 headers.

Note the difference when you hover the name Paul

.texta, .textb {
  color: orange;
  cursor: pointer;
}

/* using one h1 with a span inside */
.texta:hover span {
  color: blue;
}

/* using two h1's after each other */
.textb, .textb + h1 {
  display: inline-block;
}
.textb:hover + h1 {
  color: blue;
}
<h1 class="texta">My name is <span>Paul</span></h1>

<h1 class="textb">My name is</h1> <h1>Paul</h1>

UPDATE Your updated question can be done with flex and the order property in this way

.textb {
    display: flex;
}
#heading1 {
  order: 2;
}
#heading1 + span + span {
  order: 3;
}
#heading1:hover {
  color: red;
}
#heading1:hover + span,
#heading1:hover + span + span {
  color: #ddd; /* change to white */
}
<h3 class="textb">
  <span id="heading1" class="headingRestaurant">&nbsp;restaurant&nbsp;</span>
  <span>Not a</span>
  <span>but here for them.</span>
</h3>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274384

You can do it like below:

.textb {
  pointer-events: none;
}

.headingRestaurant {
  pointer-events: initial;
}

.textb:hover {
  color: blue;
}

.headingRestaurant:hover {
  color: red;
}
<h1 class="textb">Not a <span id="heading1" class="headingRestaurant">restaurant</span>, <br> but here for them.</h1>

Upvotes: 3

Adam
Adam

Reputation: 5994

There are several ways of doing this but the easiest way to do it is using the sibling combinator but the text has to be next to and within the same parent element. The ~ combinator will select any sibling after the first element but has to occur after the one you hover over.

The most powerful one is the :has pseudo selector but that takes a bit of understanding and isn't fully supported across all browsers yet.

See example below

.texta:hover + .textb {
  color:red;
}
<span class="texta">My name is</span>
<span class="textb">Paul</xpan>

Edit

In the comments it was requested to do a solution where the upper text changes colour when the bottom text is hovered.

This can be done with :has. Note this doens't work with firefox (yet!) or some mobile browsers but is okay for Chrome, Edge and Safari desktop browsers. See caniuse.com for details.

.container:has(.texta:hover) .textb {
  color:red;
}
<div class='container'><h1 class="textb">Not a</h1><h1 id="heading1" class="texta">restaurant</h1><div>

There's also a cheeky way with display:flex by setting the flex-direction to column-reverse. You can put the h1 blocks in reverse order but the flex box reverses them in the browser. By applying the sibling rule it'll also work that way. It might make doing changes in future a bit confusing though.

.container {
  display:flex;
  flex-direction: column-reverse;
}

.texta:hover ~ .textb {
  color:red;
}
<div class='container'>
  <h1 id="heading1" class="texta">restaurant</h1>
  <h1 class="textb">Not a</h1>
</div>
Edit #2

As per the edited question (again, this doesn't work on firefox):

.headingRestaurant:hover + .textc {
  color: white;
}

.headingRestaurant:hover {
  color: red;
}

h1:has(.headingRestaurant:hover) .texta {
  color:white;
}
<h1><span class='texta'>Not a</span><span id="heading1" class="headingRestaurant"> restaurant</span><span class='textc'>,<br> but here for them.</span></h1>

Upvotes: 5

Haseeb Javed
Haseeb Javed

Reputation: 93

Yes there are a lot of ways for this to be done.

<h1 id="a">Name A</h1>
<h1 id="b">Name B</h1>

If there are other elements between #a and #b you can do this:

#a:hover ~ #b {
    color: blue
}

Note that + and ~ will work the same in all the browsers

iF #b is the decedent of #a then you can do it like:

#a:hover #b {
    color: blue
}

this can also be done using jquery or javascript. either way you like

Upvotes: 2

Related Questions