CSS部分#mySelect{font-size:16px;text-align:center;}.container{位置：相对；宽度：30%；}.image{显示：块；宽度：100%；}.overlayFadeIn{位置：绝对；顶部：0；底部：0；左：0；右：0；高度：100%；宽度：100%；不透明度：0;过渡：.5s轻松；背景颜色：#008CBA;}.container:hover.overlayFadeIn{opacity:1;}.overlaySlideInTop{position:absolute;底部：100%；左：0；右：0；背景色：#008CBA；溢出：隐藏；宽度：100%；高度：0；transition:.5sease;}.container:hover.overlaySlideInTop{bottom:0;高度：100%；}.overlaySlideInBottom{位置：绝对；底部：0；左：0；右：0；背景色：#008CBA；溢出：隐藏；宽度：100%；高度：0；transition:.5sease;}.container:hover.overlaySlideInBottom{height:100%;}.overlaySlideInRight{position:absolute;底部：0；左：100%；右：0；背景色：#008CBA；溢出：隐藏；宽度：0；高度：100%；transition:.5sease;}.container:hover.overlaySlideInRight{width:100%;左：0；}.overlaySlideInLeft{位置：绝对；底部：0；左：0；右：0；背景色：#008CBA；溢出：隐藏；宽度：0；高度：100%；transition:.5sease;}.container:hover.overlaySlideInLeft{width:100%;}.text{color:white;字体大小：20px；位置：绝对；空白：nowrap；顶部：50%；左：50%；transform:translate(-50%,-50%);}JavaScript这部分代码只是为了展示方便，不用考虑(function(){varmySelect=document.getElementById('mySelect');overlay=document.getElementById('overlay');mySelect.onchange=function(e){overlay.className=e.target.value;}})();好了，现在所有的代码都写好了！赶紧打开浏览器看看效果吧！在这里，只是给大家提供一个思路，参考。具体实现，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的参考