Question

我想要一个句子/段落，如＃34;我喜欢每天骑自行车。＆＃34;在段落之上应该有类别：＆＃34;名词＆＃34;，＆＃34;动词＆＃34;当用户将鼠标悬停在＆＃34; Nouns＆＃34;上时，它应该导致＆＃34;自行车＆＃34;和＆＃34; day＆＃34;发光并盘旋在＆＃34;动词＆＃34;它应该是＆＃34;喜欢＆＃34;和＆＃34;骑＆＃34;。我想也许这可以通过围绕特定单词的span标签来完成，这些单词将类设置为＆＃34; noun＆＃34;或＆＃34;动词＆＃34;和某种CSS和/或JS。有人可以帮忙吗？

为了清楚起见，这就是我所说的。

Nouns - Verbs

I like to ride my bicycle every day.

Answer 1

尝试以下代码。我希望有助于获得基本想法

function selectWords(name) {
    let words = document.getElementById("words").children;
    for (let i = 0; i < words.length; i++) {
        if (words[i].className === name) {
            words[i].classList.add("selected");
        } else {
            words[i].classList.remove("selected");
        }
    }
}

let selects = document.getElementsByClassName("select");

for (let i = 0; i < selects.length; i++) {
    selects[i].addEventListener("mouseenter", function() {
        selectWords(this.dataset.words);
    });
    selects[i].addEventListener("mouseleave", function() {
        selectWords("empty");
    });
}

.selected {text-shadow: 1px 1px 1px red}

<div id="words"><span>I</span> <span class="verb">like</span> <span class="verb">to ride</span> <span>my</span> <span class="noun">bicycle</span> <span>every</span> <span class="noun">day</span></div> 
<div class="select" data-words="noun">Nouns</div>
<div class="select" data-words="verb">Verbs</div>

Answer 2

我很困惑为什么其他人都这么努力。这让我想知道我是否也误解了你，但我很确定我没有。

我使用了mouseenter和mouseleave，使用了id和div系统来完成你正在寻找的东西。

我使用jQuery来完成此任务，因此请确保包含jQuery库。

$(document).ready(function(){
/* Beginning of Verbs */
    $("#verb").mouseenter(function(){
        $(".verb").css("text-shadow", "1px 1px 1px blue");
    });
    $("#verb").mouseleave(function(){
        $(".verb").css("text-shadow", "");
    });
  /* Ending of Verbs */
  
  /* Beginning of Nouns */
    $("#noun").mouseenter(function(){
        $(".noun").css("text-shadow", "1px 1px 1px red");
    });
    $("#noun").mouseleave(function(){
        $(".noun").css("text-shadow", "");
    });
    /* Ending of Nouns */
});

#verb {

}

.verb {
text-shadow: none;
display: inline;
}
#noun {
  
}

.noun {
text-shadow: none;
display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id ="noun">Nouns</span> - <span id="verb">Verbs</span></p>

<div class="noun">I</div> like to <div class="verb">ride</div> <div class="noun">my</div> bicycle every day.

Answer 3

您可以将每个单词包装在标记中，例如<span>并使用CSS :before或:after伪元素来呈现生成的内容。

onload = function () {

  var confirmation = document.querySelector(".confirm_selection");

  var grammar = {
    "I": "noun",
    "like": "adverb",
    "to": "preposition",
    "ride": "verb",
    "my": "noun",
    "bicycle": "noun",
    "every": "adjective",
    "day": "noun"
  };
  
  Object.entries(grammar).forEach(function([word, key]) {
    var span = document.createElement("span");
    span.textContent = word;
    span.className = key;
    confirmation.appendChild(span);
  })

}

.confirm_selection {
  -webkit-transition: text-shadow 0.2s linear;
  -moz-transition: text-shadow 0.2s linear;
  -ms-transition: text-shadow 0.2s linear;
  -o-transition: text-shadow 0.2s linear;
  transition: text-shadow 0.2s linear;
  top: 50px;
  display: block;
  height: 100px;
  position: relative;
}

.confirm_selection:hover {
  text-shadow: 0 0 10px red;
}

.confirm_selection [class]:hover:before {
  content: attr(class);
  position: absolute;
  display: inline-block;
  top: -24px;
  background: #000;
  color: gold;
  z-Index: 2;
  max-width: 78px;
  overflow: hidden;
  margin-bottom: 12px;
}

.confirm_selection span {
  display:inline-block;
  position: relative;
  margin: 2px;
}

<!-- overflow-x: hidden; overflow-y: hidden; -->
<div class="confirm_selection" style="opacity: 1; ">[ Confirm Selection ]</div>

Answer 4

<div class="context"
  <span class="verb">verb</span> not a verb
  <span class="verb">another verb</span>
</div>

var verbs = document.querySelectorAll('.verb');
var bindEvent = function (el) {
  el.addEventListener('mouseenter', function () {
    for (var i = 0; i < verbs.length; i++) {
      verbs[i].style.backgroundColor = 'red';    
    }
  })
  el.addEventListener('mouseleave', function () {
    for (var i = 0; i < verbs.length; i++) {
      verbs[i].style.backgroundColor = '';    
    }
  })
}
for (var i = 0; i < verbs.length; i++) {
  bindEvent(verbs[i]);
}

我认为这些代码对您有帮助吗？

将鼠标悬停在关键字上会导致句子/段落中的某些单词发光

4 个答案: