Geek Answers Handbook

Identification of the element that the mouse in the onmouseover function

I am trying to create one function that will change the class of one of the three elements when the mouse passes through this particular element (and only that element).

However, whenever I click on any item, the class changes for all three. What for? Here is what I 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 sure this is a JavaScript issue, but I included everything anyway.

+4
source share
2 answers

For comparison, use == (equality operator) or === (strict equality operator) .

if. true. if, == ===.

if (NAME1.mouseover=true)


if (NAME1.mouseover == true)


if (NAME1.mouseover === true)

Javascript , CSS :hover.

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>
Hide result

JS- , NAME1.mouseover = true, , JS HTML ( - CSS)

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>
Hide result
+4

mouseover true if. true, if. element mouseover, DOM .

, , - CSS p.font2 p.font1:hover

, JavaScript , this onmouseover, IE Q4(this). , .

<html><head>
<style>
p.font1 {
    color: blue;
    white-space: nowrap;
    display: inline-block;
}
p.font2 {
    color: #2E2E2E;
    white-space: nowrap;
    display: inline-block;
}
</style>
<script>
function Q4(element)
{
    element.className='font2';
}
</script>
</head>
<body>
<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>
</body>
</html>
Hide result

. .

, onmouseover="this.className='font2';"

, JavaScript, jQuery, script ( CSS :hover ). , :

<html><head>
<style>
p.font1 {
    color: blue;
    white-space: nowrap;
    display: inline-block;
}
p.font2 {
    color:#2E2E2E;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$( document ).ready(function() {
    $( "p.font1" ).on({
        "mouseover": function() {
            console.log( "hovered!" );
            var elem = $( this );
            elem.addClass( "font2" );
        },
        "mouseout": function() {
            console.log( "unhovered!" );
            var elem = $( this );
            elem.removeClass( "font2" );
        }
    });
});

</script>
</head>
<body>
<p class="font1" id="change4_1"> Menu1</p>
<p class="font1" id="change4_2"> Menu2</p>
<p class="font1" id="change4_3"> Menu3</p>
</body>
</html>
Hide result

, jQuery $, , , p font1 mouseover mouseout. , , JavaScript (, ), , , . , p "font1" "font1 font2" . font2 css .

, , , .

+2
source

More articles:


All Articles