html+css:未新增圖片

<div id="er">顯示二維碼</div>
<div id="showMa" style="visibility:hidden">
<img style="width: 50px;" src="" alt="">
</div>

js:

<script>
        document.getElementById('er').onmouseover = function(){
            document.getElementById('showMa').style.visibility = ""
        }
        document.getElementById('er').onmouseleave = function(){
            document.getElementById('showMa').style.visibility = "hidden"
        }
</script>
 

不同之處:

<!--
CSS中的display和visibility 

1、隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設定為"hidden"。但是請注意，這兩種方法會產生不同的結果。

2、visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

3、display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
-->