p5.js Element mouseOver() Method

The mouseOver() method of p5.Element in p5.js is invoked whenever the user moves the mouse pointer on the element. It can be used to attach event listeners to an element.

Syntax:

mouseOver( fxn )

Parameters: This function accepts a single parameter as mentioned above and described below:

fxn: It is a function to be fired whenever the mouse is moved onto the element. A value of false can also be passed to it for preventing the previous function to fire.

The example below illustrates the mouseOver() method in p5.js:

Example:

Javascript

function setup() { 
    canv = createCanvas(550, 300); 
    textSize(20); 
  
    text("Move the mouse over the element "
        + "to change its color", 20, 20); 
  
    divelem = 
        createDiv("This is a div element"); 
    divelem.position(30, 80); 
    divelem.size(400, 200); 
    divelem.style("border: 2px dashed"); 
  
    // Using the mouseOver() method 
    // for a callback to changeColor() 
    divelem.mouseOver(changeColor); 
} 
  
function changeColor() { 
    divelem.style( 
        "background-color: lightgreen"
    ); 
  
    divelem.html( 
        "The mouse has been moved over the element!"
    ); 
} 

Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.w3wiki.net/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Element/mouseOver

Javascript

Contact Us