hover事件导致闪烁问题

今天博主在做前端的时候遇到了一个特别头疼的问题:
在拿到一个已经做了的项目来修改样式的时候,发现样式内嵌套了ivew的样式,导致hover事件出现两个问题

<div class="bottom-panel" v-if="showActiveLayerList">
                <div class="title">
                    {{la.name}}
                    <div class="close-panel">
                        <i class="iconfont icon-baseline-close-px"></i>
                    </div>
                    <div class="query-panel ">
                        <Input suffix="ios-search" v-model="xmmc" placeholder="名称" style="width: 180px;z-index:99999" @on-enter="query"/>

                    </div>
                </div>
                <Row class="header-row">
                    <Col span="8">
                        <div class="item item-header">名称</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">名称2</div>
                    </Col>
                    <Col span="2">
                        <div class="item item-header">年度</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">所在</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">文号</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">面积</div>
                    </Col>
                    <Col span="2">
                        <div class="item item-header">进度</div>
                    </Col>
                </Row>
                 <VuePerfectScrollbar v-bind:style="{width:contentWidth-330-180+'px','height':132+'px'}" ref="town-land-ps" :settings="settings" >
                        
                        <Row v-for="(item,index) in queryList" :key="index">
                            <Col span="8">
                                <div class="item">{{item.attributes.xx}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.mm}}</div>
                            </Col>
                            <Col span="2">
                                <div class="item">{{item.attributes.nn}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.zz}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.yy}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.ss}}亩</div>
                            </Col>
                            <Col span="2">
                                <div class="item">{{item.attributes.dd}}</div>
                            </Col>
                        </Row>
                    </VuePerfectScrollbar>
            </div>
        </div>

这是嵌套了iview的样式 ivu-row这个样式:大家可以试试,这是iview的作者写row和col的样式,这时候针对ivu-row设置hover事件,就会鼠标悬浮行变色,刚开始最初的样式是这样的

 .title{
                float: left;
                width:100%;
                height:40px;
                padding-left:10px;
                font-size: 14px;
                font-weight: 700;
                color:#000;
                line-height: 40px;
                padding-right: 10px;
                }

.ivu-row:hover{
                background: #eaeff2;
            }

你会发现titile里面的文字和x悬浮上去就没了,此时相信大多数人第一时间想到两个方案:
1.分别给这两个盒子设置z-index = 9999
2.给悬浮的样式设置一个 z-index = -1
当然第一种办法肯定还是和原来一样,一悬浮上去还是依旧消失
第二种方法是可以实现效果的,不过大家会发现一个bug,就是当你鼠标悬浮上去的时候会发现闪烁的问题,这是因为你一旦这样设置鼠标悬浮就触发了多次hover,所以导致了闪烁的问题!

解决方案:
当然还是第一种办法解决,肯定是要设置z-index的,但是大家百度一下z-index失效的几种情况可以发现z-index要和定位一块用,此时果断想到,
在父容器里面添加一个相对定位!
此时问题就迎刃而解了!