悬停时使div可见

Question

因此，我尝试将X按钮显示在鼠标悬停时消失。 我在stackoverflow上尝试了很多线程，但没有得到答案。

 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> 

因此，正确的做法是，即使将鼠标移到该按钮上，该代码也不会显示该按钮。 我的目标是每次鼠标在按钮上都会显示该按钮。

Answer 1

您可以使用rgb(0,0,0,0)或opacity: 0将按钮的颜色设置为不透明度0，并在悬停时设置原始颜色/不透明度，这是我想到的唯一方法。 因为您设置了display: none或visibility: hidden悬停不会触发

 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

如果您的元素设置为display:none则它的作用就好像它不在页面上一样-因此不会触发任何鼠标悬停。 您可以使用不透明性，这样可以使动画呈现出很好的淡入淡出效果，或者使用visible属性。

同样，选择器.xBtn:hover .xBtn仅将.xBtn -class元素与在同一类中徘徊的元素匹配。 您只想将其更改为.xBtn:hover { ... } 。

淡入悬停按钮的示例如下所示：

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

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

Answer 3

hover css属性对display:none元素无效，您可以改用opacity 。 另外，您还必须将按钮添加到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

一旦无显示，您将无法浏览。 导致显示无，就像页面中实际上不存在那样。将其从display:none和display:block更改为visibility: hidden和visibility: visible

Answer 5

如果要使用javascript方法，可以使用mouseover事件来切换不透明度为0的class hide

 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

下面的代码必须工作

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