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，让其显示

兄弟选择器：+

相关阅读:
每日一题｜2022-11-23｜1742. 盒子中小球的最大数量｜Golang
Halcon 第一章『Halcon语言』◆第5节：读取图像
【自监督论文阅读笔记】Simmim: A simple framework formasked image modeling
1774. 最接近目标价格的甜点成本
【Docker项目实战】使用Docker安装Blossom 笔记应用
数仓建模—维度建模之维度表
图书管理系统的测试
K8S | 容器和Pod组件
【ARM AMBA AXI 入门 12 -- AXI协议中的 WLAST 与 RLAST】
Day28_vuex模块化+namespaced_2

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