javascript - Identifying the element moused over in an onmouseover function -

i'm attempting create 1 function change class of 1 of 3 elements when mouse goes on particular element (and element).

however whenever mouse on element, class changes three. why? here's did:

<-- html -->

<p class="font1" id="change4_1" onmouseover="q4()"> menu1</p> <p class="font1" id="change4_2" onmouseover="q4()"> menu2</p> <p class="font1" id="change4_3" onmouseover="q4()"> menu3</p> 

/* css*/

p.font1 {     color:blue;     white-space:nowrap;     display: inline-block; } p.font2 {     color:#2e2e2e;     white-space:nowrap;     display: inline-block; } 

// javascript //

function q4() {     var name1 = document.getelementbyid("change4_1");     if (name1.mouseover = true) {         name1.classname = "font2";     }      var name2 = document.getelementbyid("change4_2");     if (name2.mouseover = true) {         name2.classname = "font2";     }      var name3 = document.getelementbyid("change4_3");     if (name3.mouseover = true) {         name3.classname = "font2";     } } 

i'm javascript issue included anyway.

to compare use ==(equality operator) or ===(strict equality operator).

you're not comparing value in if statement. you're assigning value true variable. compare value in if statement, use == or === operator.

if (name1.mouseover=true) 

should be

if (name1.mouseover == true) 

or

if (name1.mouseover === true) 

---

you don't need javascript change styles on mouseover, can take advantage of css :hover class.

p.font1 {    color: blue;    white-space: nowrap;    display: inline-block;  }  p.font1:hover {    color: #2e2e2e;  }

<p class="font1" id="change4_1">menu1</p>  <p class="font1" id="change4_2">menu2</p>  <p class="font1" id="change4_3">menu3</p>

update

as js code invalid, name1.mouseover = true, can use following code, if want use js change properties of html element on mouseover.(i'll still recommend use css approach)

function q4(el) {    el.classlist.add('font2');  }

p.font1 {    color: blue;    white-space: nowrap;    display: inline-block;  }  p.font2 {    color: #2e2e2e;    white-space: nowrap;    display: inline-block;  }

<p class="font1" id="change4_1" onmouseover="q4(this)">menu1</p>  <p class="font1" id="change4_2" onmouseover="q4(this)">menu2</p>  <p class="font1" id="change4_3" onmouseover="q4(this)">menu3</p>