javascript - 在 JS 中更改鼠标悬停时文本的颜色

Question

我对 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>

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

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

编辑

如果你想要一个单一的函数来处理这个，试试像这样的东西:

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