Change textcolor on hover over other word-CodePudding

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 >Not a <span id="heading1" >restaurant</span>, <br> but here for them.</h1>

CodePudding user response：

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 >My name is</span>
<span >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 >Not a</h1><h1 id="heading1" >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" >restaurant</h1>
  <h1 >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" > restaurant</span><span class='textc'>,<br> but here for them.</span></h1>

CodePudding user response：

You can do it like below:

.textb {
  pointer-events: none;
}

.headingRestaurant {
  pointer-events: initial;
}

.textb:hover {
  color: blue;
}

.headingRestaurant:hover {
  color: red;
}

<h1 >Not a <span id="heading1" >restaurant</span>, <br> but here for them.</h1>

CodePudding user response：

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

CodePudding user response：

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 >My name is <span>Paul</span></h1>

<h1 >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 >
  <span id="heading1" >&nbsp;restaurant&nbsp;</span>
  <span>Not a</span>
  <span>but here for them.</span>
</h3>