vue.js - details、summary树形做成vue版本后，hover效果无法显示？

Question

目标效果参考：https://segmentfault.com/a/1190000043966941
改成 vue 版本后，鼠标移动到节点上的显示背景效果怎么也不显示了，哪里的问题？

看不懂例子里面 z-index: -1 是怎么显示的，按照正常逻辑，这个伪类绝对定位切zindex等于-1，不应该被挡住了吗？

treeTableItem.vue

<template>    <details>        <summary class="tree-item">            <span>{{ item.name }}</span>        </summary>        <template v-if="item.children">            <treeTableItem v-for="(i, idx) in item.children" :item="i" :key="`level_${item.level}_${idx}`"></treeTableItem>        </template>    </details></template><script>import treeTableItem from './treeTableItem'export default {    name: 'treeTableItem',    components: {        treeTableItem,    },    props: {        item: Object    },    data() {        return {        }    },}</script>

treeTable.vue

<template>    <div class="my-custom-tree" id="tree" ref="treeWrapper">        <treeTableItem v-for="(item, idx) in list" :item="item" :key="`item_${idx}`"></treeTableItem>    </div></template><script>import treeTableItem from './treeTableItem'export default {    name: 'tree-table',    components: {        treeTableItem,    },    mounted() {        this.$refs.treeWrapper.addEventListener('click', function(ev){            if (ev.target.tagName === 'SPAN') {                 ev.preventDefault()            }        })    },    props: {        list: {            type: Array,            default: () => {                return []            }        },    },    data () {        return {        }    },    methods: {    },}</script><style lang="scss" scoped>.my-custom-tree {    flex: 1;    overflow: auto;    padding: 4px 0;    position: relative;}.my-custom-tree{    /deep/summary {        outline: 0;        padding-left: 30px;        list-style: none;        background: repeating-linear-gradient(90deg, #999 0 1px, transparent 0px 2px) 0px 50%/20px 1px no-repeat;    }}.my-custom-tree{    /deep/details:last-child {        background-size: 1px 23px;    }}.my-custom-tree{    ::v-deep >details:not(:last-child)>details:last-child {        background-size: 1px 100%;    }}.my-custom-tree {    /deep/details {        padding-left: 40px;        background: repeating-linear-gradient(#999 0 1px, transparent 0px 2px) 40px 0px/1px 100% no-repeat;        /* background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat; */    }}.my-custom-tree{    >details {        background: none;        padding-left: 0;    }}.my-custom-tree{    ::v-deep >details{        >summary {            background: none;        }    }}.my-custom-tree {    /deep/summary {        display: flex;        align-items: center;        height: 46px;        font-size: 14px;        line-height: 22px;        color: rgba(0, 0, 0, 0.85);        cursor: default;    }}.my-custom-tree {    /deep/summary::after {        content: "";        position: absolute;        left: 10px;        right: 10px;        height: 38px;        background: #eef2ff;        background: red;        border-radius: 8px;        z-index: -1;        opacity: 0;        transition: 2s;    }} .my-custom-tree {    /deep/summary:hover::after {        opacity: 1;    }}.my-custom-tree {    /deep/summary:not(:only-child)::before {        content: "";        width: 14px;        height: 14px;        flex-shrink: 0;        margin-right: 8px;        border: 1px solid #999;        background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,            linear-gradient(#999, #999) 50%/10px 1px no-repeat;    }}.my-custom-tree {    /deep/details[open]>summary::before {        background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;    }}.my-custom-tree{    /deep/summary span {        line-height: 46px;    }}.my-custom-tree {    /deep/summary::before {        position: relative;        z-index: 2;        cursor: pointer    }}.my-custom-tree {    /deep/summary span::before {        content: '';        position: absolute;        left: 0;        right: 0;        height: 46px;    }}</style>

使用页面代码：

const treeData = [    {        "id": 2,        "name": "项目1",        "parentId": 1,        "fileCount": 14,        "children": [            {                "id": 8,                "name": "文件夹",                "parentId": 2,                "fileCount": 12,                "children": [                    {                        "id": 137,                        "name": "sdd",                        "parentId": 8,                        "fileCount": 0                    }                ]            },            {                "id": 221,                "name": "chrome test",                "parentId": 2,                "fileCount": 2            }        ]    },    {        "id": 52,        "name": "项目2",        "parentId": 1,        "fileCount": 10,        "children": [            {                "id": 54,                "name": "文件夹2-1",                "parentId": 52,                "fileCount": 10,                "children": [                    {                        "id": 55,                        "name": "文件夹2-1-1",                        "parentId": 54,                        "fileCount": 0,                        "children": [                            {                                "id": 56,                                "name": "文件夹2-1-1-1",                                "parentId": 55,                                "fileCount": 0,                                "children": [                                    {                                        "id": 57,                                        "name": "文件夹2-1-1-1-1",                                        "parentId": 56,                                        "fileCount": 0,                                        "children": [                                            {                                                "id": 58,                                                "name": "文件夹2-1-1-1-1-1",                                                "parentId": 57,                                                "fileCount": 0                                            }                                        ]                                    }                                ]                            }                        ]                    }                ]            }        ]    },    {        "id": 53,        "name": "文件夹1",        "parentId": 1,        "fileCount": 12,        "children": [            {                "id": 80,                "name": "文件夹",                "parentId": 53,                "fileCount": 11            },            {                "id": 224,                "name": "文件夹2",                "parentId": 53,                "fileCount": 0            }        ]    },    {        "id": 69,        "name": "项目3",        "parentId": 1,        "fileCount": 55,        "children": [            {                "id": 70,                "name": "文件夹1",                "parentId": 69,                "fileCount": 12,                "children": [                    {                        "id": 4,                        "name": "1",                        "parentId": 70,                        "fileCount": 3,                        "children": [                            {                                "id": 51,                                "name": "文件夹2",                                "parentId": 4,                                "fileCount": 1                            }                        ]                    }                ]            },            {                "id": 91,                "name": "文件夹",                "parentId": 69,                "fileCount": 10            },            {                "id": 102,                "name": "文件夹",                "parentId": 69,                "fileCount": 10            },            {                "id": 113,                "name": "文件夹",                "parentId": 69,                "fileCount": 10            },            {                "id": 121,                "name": "文件夹的副本",                "parentId": 69,                "fileCount": 10            },            {                "id": 136,                "name": "点点点",                "parentId": 69,                "fileCount": 0            },            {                "id": 140,                "name": "hewei",                "parentId": 69,                "fileCount": 3,                "children": [                    {                        "id": 142,                        "name": "hewei02",                        "parentId": 140,                        "fileCount": 1                    }                ]            }        ]    }]export default {    data(){        return {            treeDatas: treeDatas        }    }}

<treeTable :list="treeDatas"></treeTable>

Answer 1

我知道了，是背景颜色的影响，把那个z-index:-1去掉，然后那个hover出现::after会覆盖文字，这里用mix-blend-mode来实现文字也可见。注意整个tree加了一个白色背景

https://codepen.io/xboxyan/pen/poqzORW