在 CSS 或 Javascript 本身中设置 Javascript Textelement 样式答案

【问题标题】：Style Javascript Textelement in CSS or Javascript itself在 CSS 或 Javascript 本身中设置 Javascript Textelement 样式
【发布时间】：2020-05-08 22:14:50
【问题描述】：

我在 HTML div 字段中放置了一个 Javascript 文本元素，现在我希望文本颜色为白色。我还想对文本进行一些其他更改。现在我想知道如何设置文本元素的样式或是否可以这种形式是可能的。

（翻译成谷歌翻译，可能有错误）

这是我的 javascript 代码：

var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);

function bghtooltipinmouseOver() {
  bghtooltipout.innerHTML = 'Go to Login';
}

function bghtooltipoutmouseOut() {
  bghtooltipout.innerHTML = ' ';
}

【问题讨论】：

标签： javascript html css text element

【解决方案1】：

有2种方式，要么使用css类，要么直接style操作

var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);

function bghtooltipinmouseOver() {
  bghtooltipout.innerHTML = 'Go to Login';
  bghtooltipin.style.color = "white";
}

function bghtooltipoutmouseOut() {
  bghtooltipout.innerHTML = ' ';
  bghtooltipin.style.color = "black";
}

<div id="bgh-tooltipin1">Test 1</div>
<div id="bgh-tooltipout1"></div>

【讨论】：

【解决方案2】：

当用户将鼠标悬停在按钮上时，您似乎想更改文本颜色。 CSS 有一个涵盖此用例的伪类。看看https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

【讨论】：

【解决方案3】：

感谢@Józef Podlecki 现在我想为我的文本添加一个小的过渡，以便文本在悬停大约 6 毫秒后。那将是我对文本的第二次更改。

因为我没有使用经典样式元素来管理它。

【讨论】：