Style Javascript Textelement in CSS or Javascript itself

Question

I have put a Javascript text element in an HTML div field and now I want the text color to be white. I also want to make a few other changes to the text. Now I wonder how I can style the text element or whether it can is possible in this form.

(Translated into Google Translate, may contain errors)

This is my javascript code:

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

Józef Podlecki · Accepted Answer · 2020-05-08 22:49:57Z

1

there are 2 ways, either use css classes or direct style manipulation

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>

answered May 8, 2020 at 22:49

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter G · Accepted Answer · 2020-05-08 22:45:32Z

0

It looks like you want to change the text color when the user mouses over the button. CSS has a pseudo-class class that covers this usecase. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

answered May 8, 2020 at 22:45

Peter G

794 bronze badges

Comments

Luca_54 · Accepted Answer · 2020-05-08 23:11:32Z

0

Thanks @Józef Podlecki now I would like to add a small transition to my text, so that the text when hovering after about 6 milliseconds. That would be my second change to the text.

Because I didn't manage that with the classic style element.

edited May 8, 2020 at 23:11

answered May 8, 2020 at 22:56

Luca_54

5396 silver badges20 bronze badges

Collectives™ on Stack Overflow

Style Javascript Textelement in CSS or Javascript itself

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related