html+css如何实现鼠标移入按钮显示图片

在下面这种代码中，我要鼠标放入按钮中再显示图片，这种做法该如何做呢

一、代码如下


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>  
        img{
            display: none;
        }
        button:hover+img {
            display: block;
        }
 
    style>
 
head>
 
<body>
    <div>
        <button>打开button>
        <img src="images/a01.jpg" alt="">
    div>
body>
 
html>

二、关键点

代码里面最关键的是button的移入操作，需要选择到兄弟img，改变img的display，让其显示

兄弟选择器：+

相关阅读:
今天零九的雪
【Linux 线程介绍】
[项目管理-15]：项目执行中的三大管理者：项目活动管理、职能部门管理、产品架构设计。
2022年6月21日cloudflare 故障宕机事件记录恭喜CF凭借一己之力，拉闸全球50%网络分发
Java实现微信支付
专车架构进化往事：好的架构是进化来的，不是设计来的
日志库的设计与模块
【自用笔记】nginx 配置多 context 及简单负载均衡
selenium元素定位之xpath
【AI视野·今日Robot 机器人论文速览第三十五期】Mon, 18 Sep 2023

原文地址：https://blog.csdn.net/qq_52545155/article/details/128012368