其實這個問題很簡單，只需要使用一個樣式：
不透明度： opacity: 數值.(值愈大,不透明度越高)
例:
有2個盒子，b在a內部,分別給2個盒子設置一個背景色,要求效果是一開始只顯示a, 但當鼠標懸浮在a上時b 出現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #a{ width: 200px; height: 200px; background: lightblue; } #a>#b{ width: 70px; height: 70px; background: red; opacity:0; transition: all .3s linear; } #a:hover>#b{ opacity: 1; } </style> </head> <body> <div id="a"> <div id="b"></div> </div> </body> </html>
從代碼中我們可以看出，我們先給盒子b加了一個opacity:0;，這使他的不透明度變為0，就是相當於是盒子b透明了.
在給a加了hover之后 ，盒子b的變成了 opacity: 1;，不透明度變成了1，這時鼠標懸浮在盒子a上時，就可以看到盒子b出現
效果如圖:
同理,可以把兩個盒子換成圖片文字等
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css"> #a{ width: 200px; height: 200px; background: lightblue;} #a>#b{ width: 70px; height: 70px; background: red; opacity:0; transition: all .3s linear;} #a:hover>#b{ opacity: 1;}</style></head><body><div id="a"><div id="b"></div></div></body></html>