CODEWITHSUNDEEP
javascriptcss
SahiBalata
SahiBalata

Reputation: 353

Make div visible when hover

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.

Upvotes: 0

Views: 129

Answers (6)

Amaranadh Meda
Amaranadh Meda

Reputation: 724

The below code must work 

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

Upvotes: 0

PEPEGA
PEPEGA

Reputation: 2271

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

Upvotes: 1

Aziz.G
Aziz.G

Reputation: 3721

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;
}

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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;
}

Upvotes: 1

Fitzi
Fitzi

Reputation: 1673

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>

Upvotes: 1

richard nelson
richard nelson

Reputation: 267

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

Upvotes: 0

Related Questions