Question

我是JS的新手。我的要求非常简单，要改变Mouse Over上Text的颜色。我创建了2个JS函数：第一个用于MouseOver，第二个用于MouseOut。我可以在一个JS函数中完成它。我还有其他文字。

的JavaScript

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

HTML code：

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

Answer 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';
}

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

修改

如果您想要一个功能来处理这个问题，请尝试使用：

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

Answer 2

使用css很简单：

selector:hover
{
  color:red;
}

你也可以使用jquery来实现这个

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

Answer 3

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

但是，如果您要将其添加到非链接元素，则可能会导致IE7和8中出现问题。请查看Google Best Practices，特别是关于：hover的部分。如果是这种情况，那么JS就是一种方法。

Answer 4

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

.green{
    color: green;
}

将您的HTML更改为

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

当你将鼠标移到'element'上时添加一些jquery来添加你的css类，例如

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

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

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

Answer 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 文本变为黑色。

在JS中改变鼠标悬停时文本的颜色

的JavaScript

HTML code：

5 个答案: