Odtnhj

I created an <img/> element from js and i want it to appear only when mouseover

The callback function makesVisible() is actually called but nothing is change.

I would like to change visibility from hidden to visible

var imgHover = document.createElement('img');
 imgHover.setAttribute("src", "img/icona_play.jpg");
 imgHover.style.width = "30px";
 imgHover.style.height = "23px";
 imgHover.style.position = "absolute";
 imgHover.style.margin = "0 auto";
 imgHover.style.left = "45px";
 imgHover.style.bottom = "35px";
 //I want to change this following property
 imgHover.style.visibility = "hidden";
 imgContainer.appendChild(imgHover);

 //Calling the function when mouseover
 imgContainer.addEventListener("mouseover", makeVisible, false);


 function makeVisible()
 
 imgHover.style.visibility = "visible";
 

You have an option of using an opacity property instead.
Initially set it like so: imgHover.style.opacity = 0;
Than in the makeVisible method change it to imgHover.style.opacity = 1;

Another solution to this problem would be setting addEventListener method on the container div. Assuming that you can have a container around the image with exactly the same dimensions as the Image.

For example:

imgContainer.addEventListener("mouseover", makeVisible, false);

The thing is that opacity and visibility will act the same in a sense of not collapsing the space that the element should occupy. What is different though that hidden element will ignore mouse/pointer events.

Your code works as it should provided that you set up a valid reference to imgContainer and that you set a valid path to an image for the dynamically created element:

var imgContainer = document.getElementById("container");
var imgHover = document.createElement('img');
imgHover.setAttribute("src", "https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png");
imgHover.style.width = "30px";
imgHover.style.height = "23px";
imgHover.style.position = "absolute";
imgHover.style.margin = "0 auto";
imgHover.style.left = "45px";
imgHover.style.bottom = "35px";
imgHover.style.visibility = "hidden";
imgContainer.appendChild(imgHover);

imgContainer.addEventListener("mouseover", makeVisible, false);

function makeVisible()
 imgHover.style.visibility = "visible";

<div id="container">Hover Over Me</div>

Having said that, you should avoid setting inline styles on elements as they are hard to override when needed and they often cause duplication of code. It's much simpler to set up CSS classes ahead of time and just apply/remove those classes as needed with the element.classList API.

Also, visibility does affect whether you see an element or not, but even when you don't see it, space is allocated in the UI for it, which isn't always desirable. In most cases, using a display:none to hide an element and then simply removing that instruction to show the element is the better approach.

Lastly, while using setAttribute() is certainly valid, you can also configure your elements via their direct properties. Almost all HTML attributes map to a corresponding JavaScript object property. Using these can make the code much simpler.

Take a look at an example that puts all this together:

var imgContainer = document.getElementById("container");
var imgHover = document.createElement('img');

// Just set properties of the element directly:
imgHover.src ="https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png";

// Just add pre-made classes to style the element
imgHover.classList.add("hoverImg");
imgHover.classList.add("hidden");

imgContainer.appendChild(imgHover);
imgContainer.addEventListener("mouseover", makeVisible);
function makeVisible()
 imgHover.classList.remove("hidden");;

.hidden display:none; /* Used when an element needs to be hidden */

/* This will be applied via JS */
.hoverImg 
 width:30px;
 height:23px;
 position: absolute;
 margin:0 auto;
 left:45px;
 bottom:35px;

<div id="container">Hover Over Me</div>

Here you were appending element like this 
imgContainer.appendChild(imgHover);
So reference for imgHover element in dom will get 
change. Fetch that element once again inside 
makeVisible() function.
document.querySelector("img") // use your appropriate.