懸停時使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;
}