Make div visible when hover

Question

so I'm trying to make an X button appear and disapear when mouse over on it. Iv'e tried alot of threads over stackoverflow and did not get an answer.

 let closeX = document.createElement("button"); closeX.className = "xBtn"; 

 .xBtn { display: none; width: 23px; height: 23px; background-image: url(img/xIcon.png); background-size: 100%; position: relative; top: -183px; right: -154px; } .xBtn:hover .xBtn { display: block; } 

 <button class="xBtn"> Click </button> 

So correcly what this code does is just not showing the button even when the mouser is over it. my goal is that the button will be showen everytime the mouse is on it.

Answer 1

You can set the color of the button to opacity 0 with rgb(0,0,0,0) or opacity: 0 and on hover set the original color/opacity, This is the only way I can think of doing it. Beacuse if you set display: none or visibility: hidden hover wont trigger

 button{ color: rgb(0,0,0,0); background-color: rgb(0,0,0,0); border-color: rgb(0,0,0,0); /*or*/ opacity: 0; } button:hover{ border-color: buttonface; color: buttontext; background-color: buttonface; /*or*/ opacity: 1; } 

 -><button>Hello!</button><- 

Answer 2

If your element is set to display:none it will act as if it is not on the page - so no mouseover will be triggered. You could work with opacity, which would allow for a nice fade in animation, or with the visibility property instead.

Also, the selector .xBtn:hover .xBtn would only match elements with the .xBtn -class WITHIN an element that is hovered with the same class. You want to change this to .xBtn:hover { ... } only.

An example to fade in the button on hover would look like this:

 .xBtn{ opacity: 0; transition: opacity 0.5s; } .xBtn:hover { opacity: 1; } 

 Hovere there -&gt; <button class="xBtn"> My button </button> 

Answer 3

The hover css property has no effect on display:none element, you can use opacity instead. Also you have to append the button in the DOM.

 let closeX = document.createElement("button"); closeX.textContent = 'Save'; closeX.className = "xBtn"; document.body.append(closeX); 

 .xBtn{ opacity: 0; width: 23px; height: 23px; background-image: url(img/xIcon.png); background-size: 100%; position: relative; --top: -183px; --right: -154px; } .xBtn:hover{ opacity: 1; } 

Answer 4

Once the display is none you can't go over it. Cause in display none it's like if it doesn't really exist in the page Change it from display:none and display:block to visibility: hidden and visibility: visible

Answer 5

if you want to do it the javascript way you can use an event of mouseover that toggle a class hide with an opacity of 0

 let closeX = document.createElement("input"); closeX.setAttribute("type", "button"); closeX.setAttribute("value", "button"); document.body.appendChild(closeX); closeX.addEventListener("mouseover", function() { this.classList.toggle("hide"); }); 

 .hide { opacity: 0; } 

Answer 6

The below code must work

.xBtn {
    opacity: 0;
    width: 23px;
    height: 23px;
    background-image: url(img/xIcon.png);
    position: relative;
}
.xBtn:hover {
    opacity: 1;
}