Show several elements of different classes when a span is hovered over

Question

I have a problem in building something typically I am not a front-end developer so although trying several things I failed. The problem:

I have several sentences in a document, and each sentence has several words. Each of these words might be relevant. For instance a word might signal a place, time or something like that. What I want to achieve that if someone hovers over a verb in a sentence only the relevant words in that sentence get a color. The colors function as a sort of map to indicate what is what.

Tried so far:

In CSS I have tried to use something like a pseudo class. However, the problem is that if you use the pseudo class hover, only the elements (e.g. spans) after the verb change. I need every relevant word(or element probably) to change.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/contractinfo.css">
    </head>
<body>

    <div class = "sentence">
        <span class = "word">The</span>
        
        <span class = "agent">Party</span>

        <span class = "verb" id = "verb">gives
            <span class="actiontext">Action Text</span>
        </span>
        <span class = "word">1000</span>
        <span class = "resource">Euro</span>

        <span class = "word">.</span>
    </div>


</body>
</html>

The CSS code I tried:



.sentence{
  font: Helvetica;
}


.word{
  display: inline-block;
  margin-right: 4px;
  padding: 3px;
}

.agent{
    display: inline-block;
    margin-right: 4px;
    padding: 3px;  

}
.resource{
    display: inline-block;
    margin-right: 4px;
    padding: 3px;  
}
/*text of the verb that is initially displayed */

.verb {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted blue;
    margin-right: 4px;
    padding: 3px;
  }
/*text of the action(s) that should be displayed once hovered*/

.verb .actiontext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
.verb .actiontext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
.verb:hover .actiontext {
    visibility: visible;
    opacity: 1;
  }

.verb:hover ~ .resource { background-color: yellow; 
  }

All help is much appreciated!

Instead of describing your code and your attempts, why don't you just paste them in your question? It's easier to repair a car when you see it and you can open the hood, than if someone explains you what color the car is. Please see [how to ask](https://stackoverflow.com/help/how-to-ask) — Jeremy Thille, Nov 12 '20 at 16:11
If you post your code you’d get better answers, but a high level solution could be to use the onmouseover event to trigger a callback. What that callback does depends on your code, but you could toggle a class that changes the color of the words. — Cameron, Nov 12 '20 at 16:14
Put a span around every word and give it a class (or classes or data- array) to match the relevancy. On hover of the span, add a "highlight" class to all the other spans that have the same class. — freedomn-m, Nov 12 '20 at 16:19
These questions might be relevant. Doesn't sound like there's a great solution. https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector https://stackoverflow.com/questions/12574668/change-color-of-sibling-elements-on-hover-using-css https://stackoverflow.com/questions/8426160/is-there-such-a-thing-as-an-all-inclusive-sibling-css-selector — Scotty Waggoner, Nov 12 '20 at 19:20
Thanks for the comments @JeremyThille Posted the code that I have already tried. To clarify what I meant a bit better: Basically when the span of the verb is hovered over the agent and resource class should get a color, as of now it shows the text which is also mean this way. — BJBut, Nov 12 '20 at 19:54
@ScottyWaggoner thanks for the links. I have tried these approaches to. Problem I encountered is that not all spans that I want to use are actually siblings of the verb class. In my code for instance the ```HTML Euro ``` — BJBut, Nov 12 '20 at 20:03

score 0 · Answer 1 · answered Nov 16 '20 at 12:00

Hi I found the solution!

$(document).ready(function() {
    $("span.verb").hover(function() {
        $(this).siblings("span.resource").addClass("resourceselect");
        $(this).siblings("span.agentgiv").addClass("agentgivselect");
    }, function() {
        $(this).siblings("span.resource").removeClass("resourceselect");
        $(this).siblings("span.agentgiv").removeClass("agentgivselect");
    });
});

.contractcontainer{
  background-color: white;
}

.sentence{
  font: Helvetica;
}

.word{
  text-align: center;
  display: inline-block;
  margin-left: 1px;
  padding: 1px;
}

.punct{
  text-align: left;
  display: inline-block;
  padding-top: 1px;
  padding-bottom: 1px;
}

.agentgiv{
    text-align: center;
    display: inline-block;
    margin-left: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.resource{
    text-align: center;
    display: inline-block;
    margin-left: 4px;
    padding-top: 1px;
    padding-bottom: 1px;   
}
/*text of the verb that is initially displayed */

.verb {
    text-align: center;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted blue;
    margin-left: 4px;
    padding-top: 1px;
    padding-bottom: 1px; 
  }
/*text of the action(s) that should be displayed once hovered*/

.verb .actiontext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }

.verb .actiontext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }

.resourceselect{
  background-color: blue;
  text-align: center;
  padding-top: 1px;
  padding-bottom: 1px;
}
.agentgivselect{
  background-color: purple;
  text-align: center;
  padding-top: 1px;
  padding-bottom: 1px;
}
  
.verb:hover .actiontext {
    visibility: visible;
    opacity: 1;
  }

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/contractinfo.css">
    </head>
<body>
    
    <button onclick="contractDisplay(contract_information)">Try it</button>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./index.js"> </script>


    <div class = "contractcontainer" id="contract_container" >
        
        <div class = "sentence">
            <span class = "word">Hello</span>
            
            <span class = "agentgiv">Party A</span>
            <span class = "verb">
                <span class="actiontext">Show me!</span>
                give
            </span>
            
            <span class = "resource">Euro</span>

            <span class = "punct">.</span>
        </div>
    </div>
    
</body>
</html>

Show several elements of different classes when a span is hovered over

1 Answers1