在JS中更改鼠标悬停时的文本颜色答案

【问题标题】：change the color of text on mouseover in JS在JS中更改鼠标悬停时的文本颜色
【发布时间】：2021-04-25 03:08:09
【问题描述】：

我对 JS 很陌生。我的要求很简单，改变鼠标悬停时文本的颜色。我创建了 2 个 JS 函数：第一个用于 MouseOver，第二个用于 MouseOut。我可以在一个 JS 函数中完成它吗？我还有其他文字。

JavaScript

function highlightBG(element) {  
    document.getElementById('element').className='AttachOnMouseOverText';   
}
function highlightOutBG(element){
    document.getElementById('element').className='AttachOnMouseOutText';
}

HTML 代码：

<td align="center" id="element">
    <img name="folder" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">
    <br>Add Folder
</td>

【问题讨论】：

你可以用javascript做类似的事情。但是您应该研究 CSS（当您标记它时），您可以使用元素父元素和 :hover 选择器来更改外观。您也不需要 mouseOutText 类，因为一旦您离开特定元素，:hover 状态就会被删除。
这里是一个例子：jsfiddle.net/5NA9q（不要像我在这里那样使用表格作为列表，我遵循了你的代码。）
是的，对..但是将这两个功能组合成一个呢？ CSS classess 确实解决了我的目的，但我想我们也许可以取消为每个 mouseover/mouseout 事件编写两个 jscript。相反，我们应该调用一个单独的 jscript 函数，我们可以在其中传递像 out/over 和 id 这样的参数来设置文本的样式。其次，“添加文件夹”不是唯一的文本，但我在中还有一些文本也应该具有相同的效果
我的意思是，让我们看看我的 JS 代码： function highlightBG(element) { document.getElementById('element').className='AttachOnMouseOverText'; } 功能 highlightOutBG(element1){ document.getElementById('element1').className='AttachOnMouseOutText';这里不是有两个 JS 函数，我想使用单个 JS，并且可以将参数传递给它

【解决方案1】：

您可以按照您的要求使用 pure-js 在这里找到答案：

HTML：

<div id="element" class="AttachOnMouseOutText" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">Hidden text</div>

CSS：

.AttachOnMouseOverText {
    color: white;
}

.AttachOnMouseOutText {
    color: black;
}

Javascript：

function highlightBG() {  
    document.getElementById('element').className='AttachOnMouseOverText';   
}
function highlightOutBG(){
    document.getElementById('element').className='AttachOnMouseOutText';
}

您可以看到 here 使用 CSS :hover 状态的示例。

编辑

如果你想要一个函数来处理这个，试试类似的东西：

function highlightBG(elementName, isIn) {
    if (isIn)
        document.getElementById(elementName).className = 'AttachOnMouseOverText';
    else
        document.getElementById(elementName).className = 'AttachOnMouseOutText';
}

【讨论】：

问题是客户希望一切都在 JS 中，而不是在 JQuery 中。 CSS classess 确实解决了我的目的，但我想我们也许可以取消为每个 mouseover/mouseout 事件编写两个 jscript。相反，我们应该调用一个单独的 jscript 函数，我们可以在其中传递像 out/over 和 id 这样的参数来设置文本的样式。其次，“添加文件夹”不是唯一的文本，但我在中还有一些文本，它们也应该具有相同的效果。
我的示例中没有使用 jQuery。用我给你看的内容，我将文本颜色设置为 div，因此所有嵌套元素都会受到影响。
这是当前代码：function highlightBG(element) { document.getElementById('element').className='AttachOnMouseOverText'; } 功能 highlightOutBG(element1){ document.getElementById('element1').className='AttachOnMouseOutText'; } CSS：.AttachOnMouseOverText{ 颜色：蓝色；字体大小：9px；文本对齐：居中； } .AttachOnMouseOutText{ 颜色：黑色；字体大小：9px；文本对齐：居中； }
HTML:
添加文件夹
添加网址
有什么建议可以把两个JS合并成一个吗？

【解决方案2】：

使用 css 很简单：

selector:hover
{
  color:red;
}

你也可以使用 jquery 来做这个

$("selector").on( "mouseover", function() {
  $( this ).css( "color", "red" );
});

【讨论】：

OP 不使用 jQuery
我不明白为什么人们总是引用 jQuery。 TS 没有要求，不建议包含库来实现简单的悬停效果。

【解决方案3】：

如果您需要在链接上更改悬停，那么一定要在 CSS 中使用 :hover，这将是最有效的方式。

但是，如果您希望将其添加到非链接元素，则可能会导致 IE7 和 8 出现问题。请查看Google Best Practices，尤其是有关 :hover 的部分。如果是这样，那么 JS 是一种方法。

【讨论】：

【解决方案4】：

使用 jquery 来做你想做的事情可能会更容易，如果你使用的是 javascript，你也可以使用 jquery。创建一个css类来表示你想要将文本更改为的颜色，例如

.green{
    color: green;
}

将您的 HTML 更改为

<td align="center" id="element">
    <img name="folder" />
    <br>Add Folder
</td>

并添加一些 jquery 来添加你的 css 类，例如当你将鼠标移到“元素”上时

$("#element").mouseover(function(){
    $(this).addClass("green");
});

如果您想在鼠标离开该区域时将颜色改回，您可以再次删除该类。例如

$( "#element" ).mouseleave(function() {
    $(this).removeClass("green");
});

【讨论】：

【解决方案5】：

这是 HTML（内联 ID 为“practice”）：

<h1 id="practice">Hello!</h1>

这里是原版 JavaScript（使用通用函数和回调）：

document.getElementById("practice").addEventListener("mouseover", function() {
  document.getElementById("practice").style.color = "pink";
});
document.getElementById("practice").addEventListener("mouseout", function() {
  document.getElementById("practice").style.color = "yellow";
});

鼠标悬停会将 HTML 文本变为黄色；从该区域中移除鼠标会使 HTML 文本变为黑色。

【讨论】：