如何在JavaScript中实现鼠标悬停时更改字母颜色

Question

这是我的代码：

$(document).ready(function(){
  var letters = $('p').text();
  for(var letter of letters) {
    $(letter).wrap("<span class='x'></span>");
  }
})

.x:hover {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Hello World!</p>

例如，当鼠标悬停在 r 上时，我希望只有 r 的颜色变为 orange，而其他字母保持不变。

- Ehsan

---

我建议看一下lettering.js。 - user9726814

Answer 1

你可以首先使用<span class='x'>为<p>中的每个字符创建一个新的HTML内容，然后用该HTML替换<p>的HTML。现在，当你悬停在每个字符上时，该字符的颜色会变成orange。

$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
})

.x:hover {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Hello World!</p>

- Ankit Agarwal

---

@Ehsan 你可以使用那个，但是你也要确保你的DOM已经更新。 - Ankit Agarwal

@Ehsan 最好通过像字符串连接这样简单的方式来保持简洁。易于理解和快速。 - Ankit Agarwal

@Ehsan，你可以这样做，但是不能使用 $(letter)。你需要像这样做：$(document.createTextNode(letter))，这样你就可以将其 wrap 并追加到 DOM 中了。 - Bergi

@Ehsan 我说的是“追加到DOM”，而不是“与字符串连接”。 - Bergi

Answer 2

你可以将每个字母用 class 为 x 的 span 标签包围起来。 示例：

$("#x").html(
  $("#x").text().split("").map(a => `<span class="x">${a}</span>`)
)

.x:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p id="x">Hello World!</p>

- Mohamed Abbas

Answer 3

你可以通过使用CSS来解决这个问题。创建一个div，里面写一个带有id的文本命令。使用该id在CSS中进行引用。

.id:hover{
    color: blue;
}

- ninjadev