vue 实现鼠标悬浮 显示操作按钮 css写法

<div class="tree-view-item">
                        <span class="tree-view-left">{{ item.title }}</span>
                        <div class="tree-view-right">
                            <!-- @click.stop="onHandleEditBranchOffice(item)" -->
                            <button class="tree-view-operation">
                            <img
                                src="//assets.2dfire.com/frontend/a7a2aed48cbeac93209d8cf12abb7120.png"
                                alt="编辑"
                            />
                            </button>
                            <!-- @click.stop="onHandleDeleteBranchOffice(item.key)" -->
                            <button class="tree-view-operation">
                            <img
                                src="//assets.2dfire.com/frontend/ddb26080b4607970693a064ceef5a672.png"
                                alt="删除"
                            />
                            </button>
                        </div>
                    </div>
.tree-view-right {
    display: none;
}
.tree-view-item:hover>>>.tree-view-right {
    display: inline;
}

版权声明:本文为qq_43184550原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。