marquee 滾動到文字上時停止滾動，自定義停止方法

我要實現的效果如下圖：當鼠標移到續費提醒文字上時，文字滾動停止，並出現后面的關閉按鈕；當鼠標移出文字時，文字繼續滾動，后面的關閉按鈕不顯示。

在網上查到的marquee停止滾動的的代碼是這樣的：

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ：用來設置鼠標移出該區域時繼續滾動 onMouseOver="this.stop()"：用來設置鼠標移入該區域時停止滾動</marquee>

但是這樣有幾個問題：1、鼠標移入marquee標簽時就停止了，我要實現的是移入文字部分 ； 2、移入marquee 如何實現控制關閉按鈕的顯示隱藏
解決問題的方式：將鼠標移入和移出相關的方法加在包裹文字和關閉按鈕的div上，自定義事件去處理關閉按鈕的顯示和隱藏

我的HTML部分的代碼如下：

<div class="marqueeDiv" v-if="showCarouselData">
        <marquee id="marquee" class="marquee" scrollamount="5" >
            <div class="marqueeSpanBox" @mouseover="marqueeMove()" @mouseleave="marqueeOut()">
                <span class="marqueeSpan">{{carouselData}}</span>
                <i class="el-icon-close marqueeCloseBox" v-if="showCarCloseBtn" @click="closeMarquee"></i>
            </div>
        </marquee>
    </div>

js部分代碼：

marqueeMove:function(){
                var marquee = document.getElementById('marquee');
                marquee.stop();
                this.showCarCloseBtn = true;  //顯示關閉按鈕
            },
            marqueeOut:function(){
                var marquee = document.getElementById('marquee');
                marquee.start();
                this.showCarCloseBtn = false;  //隱藏關閉按鈕
            },
            closeMarquee:function(){
                this.showCarouselData = false;
            }

鼠標移出事件我剛開始用的mouseout，但是有遇到問題，就是當我鼠標移出上面綠框的文字部分，關閉按鈕就消失，后面將mouseout改成了mouseleave
它們的主要區別：
mouseout在鼠標指針離開綁定元素的任何子元素時也會觸發；
mouseleave在鼠標指針離開綁定元素的任何子元素時不會觸發；

其中還有一點element-ui的圖標改大小是直接設置font-size就好了

上面的錯誤犯過兩次了，記一下，不能再犯第三次