Use CSS to apply hover effects to multiple sections of text at the same time

Question

Use CSS to apply hover effects to multiple sections of text at the same time

Is there a way in CSS to apply the hover state to one part of HTML text when another part is hovered over, both sharing the same class?

I have a block of text in HTML that is broken down into individual words, each word linked to a specific CSS class. It is possible for multiple words to be linked to the same class.

For example, if I have three words and two classes (classA, classB),

word1, word3 -> classA
word2 -> classB

This would result in the following HTML code :

<span class=classA>word1</span>
<span class=classB>word2</span>
<span class=classA>word3</span>

The issue at hand is changing the appearance of all words with a shared class when any one of them is hovered over.

I attempted the following:

.classA {
    color: red;
  }
.classA:hover {
    color: blue;
  }

Unfortunately, when the mouse hovers over "word1," only "word1" is highlighted, and not "word3" which belongs to the same class ("classA").

Any assistance on this matter would be greatly appreciated!

html css

Answer 1

Answer №1

Simply put, the answer is NO, using only CSS. However, there are alternative solutions that I will share with you below.

You can utilize the adjacent selector to simultaneously apply the :hover effect:

.classA:hover + .classB + .classA {
    color: blue;
}

See Demo Here

Unfortunately, this method will only work when you hover over the first group element. Another approach is to use a wrapper element, but this may be restrictive if you have only two combinations of classes where you wish to style a single type of class.

.wrapper_class:hover .classA {
   color: blue;
}

View Demo 2

Answer 2

Simply put, the answer is NO, using only CSS. However, there are alternative solutions that I will share with you below.

You can utilize the adjacent selector to simultaneously apply the :hover effect:

.classA:hover + .classB + .classA {
    color: blue;
}

See Demo Here

Unfortunately, this method will only work when you hover over the first group element. Another approach is to use a wrapper element, but this may be restrictive if you have only two combinations of classes where you wish to style a single type of class.

.wrapper_class:hover .classA {
   color: blue;
}

View Demo 2

Answer 3

Answer №2

.classA:hover {
  color: blue;
}

This particular code affects elements with the class=classA that are being hovered over. Using JavaScript might be a more straightforward approach:

var span = document.getElementsByClassName('classA');
var i = 0;
while(i < span.length){
    span[i].onmouseover = function change(){
        var i = 0;
        while(i < span.length){
            span[i].style.color = 'blue';
            i++;
        }
    }

    span[i].onmouseout = function change(){
        var i = 0;
        while(i < span.length){
            span[i].style.color = 'red';
            i++;
        }
    }

    i++;
}

http://jsfiddle.net/fa7d0/Bt8eN/1/

Answer 4

.classA:hover {
  color: blue;
}

This particular code affects elements with the class=classA that are being hovered over. Using JavaScript might be a more straightforward approach:

var span = document.getElementsByClassName('classA');
var i = 0;
while(i < span.length){
    span[i].onmouseover = function change(){
        var i = 0;
        while(i < span.length){
            span[i].style.color = 'blue';
            i++;
        }
    }

    span[i].onmouseout = function change(){
        var i = 0;
        while(i < span.length){
            span[i].style.color = 'red';
            i++;
        }
    }

    i++;
}

http://jsfiddle.net/fa7d0/Bt8eN/1/

Use CSS to apply hover effects to multiple sections of text at the same time

Answer №1

Answer №2

Similar questions

What are the steps to creating a fading effect for an item that appears as it enters the field of view and disappears as it exits the field of view?

Guide on Modifying the CSS File of an Installed Plugin on WordPress

Allowing breaks with the :nth-child() selector

Include a return or delete from the default IO statement

Troubleshooting issues with mail subscriptions using Ajax and PHP

Getting rid of the outline on <html> while tabbing in Firefox

Issues with CSS and JavaScript functionality persist within the Flask framework

Switch up the placement of the boxes by moving them in different directions, such as

Increasing the size of a card beyond the container using the CSS PRE tag

What is the best way to blend a portion of an image into a div?

Add option button

I am looking to automatically add a line of HTML text to the notifications list without requiring the user to manually refresh the page

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

Selenium for handling multiple input fields

Modifying the content of a paragraph by incorporating information from various sources

Is jQuery causing the table to exceed the page width?

Define the width of jqgrid

The image slider script I've built is functioning perfectly in Codepen, but unfortunately, it's not working as

Tips for properly showcasing images on a webpage after ensuring all other content has loaded

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching