Problem when changing background color when you mouse over it

Question

Problem when changing background color when you mouse over it

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Hi, I have a problem in javascript with the div tag, I want to change the background color when it happens, but I do not change color.

This led to an example in which a function with 2 parameters was declared

function color(n,r){
if(r=='si')
    document.getElementById(n).style.background="#FFOOCC"

else
    document.getElementById(n).style.background=""

and so it remains on the div tag

<div id='1' onMouseOver=color('1','si') onMouseOut=color('1','n')>provando div1</div>

and I do not know what the problem is thanks

javascript

asked by Juan Carlos Olivera Gomez 06.12.2017 в 00:53

source

3 answers

Print a file saved in C # inputs and checkbox insertion selection

score 0 · Answer 1

You can interspersed between the mouseover and mouseout mouse events to change colors on your div.

<div id='n' onMouseOver=mouseOver() onMouseOut=mouseOut()>probando div1</div>

function mouseOver() {
    document.getElementById("n").style.color = "#FFOOCC";
}

function mouseOut() {
    document.getElementById("n").style.color = "black";
}

onmouseover Event

You can also do it with CSS

#n:hover { 
    background-color: #FFOOCC;
}

Now applying your function of two parameters you can validate in this way

function color(r){ 
    if(r=="si")
        document.getElementById('n').style.background ="blue"
    else 
        document.getElementById('n').style.background ="#f3f3f3"
}

div {
    width: 50vw;
    height: 50vw;
}

<div id="n" onMouseOver=color('si') onMouseOut=color('n')>probando div1</div>

score 0 · Answer 2

Your error is as follows: the color code is wrong, you must bear in mind that a hexadecimal color code has 6 digits, ranging from A to F and 0 to 9 . In this case in your color you are passing two letters or capital letters (OO) which does not generate any color, simply change those two letters or for two zeros (00), leaving like this:

function color(n,r){
  if(r=='si')
    document.getElementById(n).style.background="#FF00CC"
  else
    document.getElementById(n).style.background=""
}

<div id='1' onMouseOver=color('1','si') onMouseOut=color('1','n')>provando div1</div>

score 0 · Answer 3

Your problem is that #FFOOCC has it as the letter 'O', but it must be the number '0'

Alternatively, you can also do it only with CSS like this:

#div1:hover{
  background-color: #FF00CC;
}

<div id='div1'>provando div1</div>