将鼠标悬停在跨度上时显示不同类别的多个元素

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.在 CSS 中，我尝试使用类似伪类的东西。 However, the problem is that if you use the pseudo class hover, only the elements (eg 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:我试过的 CSS 代码：



.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!非常感谢所有帮助！

Answer 1

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>

将鼠标悬停在跨度上时显示不同类别的多个元素

问题描述

1 个解决方案

解决方案1
0 2020-11-16 12:00:37

将鼠标悬停在跨度上时显示不同类别的多个元素

问题描述

1 个解决方案

解决方案1 0 2020-11-16 12:00:37

解决方案1
0 2020-11-16 12:00:37