HTML+CSS+JavaScriptにより、マウスの動きに合わせて選択したエフェクトの表示を実現します。

<div class="プロセスリスト-lpu">
                <div class="process_line"></div>
                <div class="content_list">
                    <ul>
                        <li><a href="javascipt:;">エンド カスタマーが製品を入手<b>1</b></a> </li>
                        <li><a href="javascipt:;">EFOSE Web サイトにログインし、インストールまたはメンテナンスの要件を提示します <b>2</b></a></li>
                        <li><a href="javascipt:;">EFOSE 優先連絡先サービス ポイント<b>3</b></a> </li>
                        <li style="margin-left:115px;"><a href="javascipt:;">サービスを受けるための顧客連絡先サービスポイント<b>4</b></a> </li>
                        <li><a href="javascipt:;">顧客が直接請求書を支払うか、EFOSE がメンテナンス費用を支払います<b>5</b></a> </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            
            </div>

.line-lpu{ 高さ:55px; 位置:相対; 幅:100%; オーバーフロー:非表示;}
    .line-lpu span{ 幅:43px; 高さ:46px; 背景:url('https://www.efose.com/images/banners/lpu_03.png') 繰り返しなし; 位置:絶対;上部:0;}
    .border-lpu{border-bottom:1px solid #959595; height:23px; }
     .join-lpu li{ 幅:19%; フロート:左; マージン右:8px; 背景:なし; パディング:0; }
    .join-lpu li a{ display:block; color:#606060; text-decoration:none; border:1px solid #959595; min-height:215px; padding:10px;position:relative; overflow:hidden;} 
    .join-lpu li a:hover{border:1px solid #337ab7;}
    .join-lpu li b{ フォントサイズ:60px; 位置:絶対; 下:7px; 右:-1px; フォントスタイル:斜体; 色:#c7c7c7;}
    .clear{clear:both;}
    .step-lpu span{ background:url('https://www.efose.com/images/banners/icon-lpu.png') 繰り返しなし; 表示:ブロック; 幅:75px; 高さ:65px; 左余白:28px;}
    .step-lpu .icon0{ 背景位置:0 0;}
    .step-lpu .icon1{ 背景位置:0 -70px;}
    .step-lpu .icon2{ 背景位置:0 -140px;}
    .step-lpu .icon3{ 背景位置:0 -204px; 高さ:58px; 下部余白:7px;}
    .step-lpu .icon4{ 背景位置:0 -260px;}

<script type="text/javascript">
        //animationHoverオブジェクトをインスタンス化します。window.onload = function(){
            var ah = 新しい animationHover();  
            ああ、init();
        }; 
        //ラベルオブジェクトを初期化する function animationHover(){
            this.step = document.getElementById('step');
            this.stepLi = this.step.getElementsByTagName('li');
            行をドキュメントに追加します。
            this.attr = null;
            this.timer = null;
            this.target = null;
                            
            }
        //イベントを初期化する animationHover.prototype.init=function(){
            これ = これ;
            for(var i=0;i<this.stepLi.length;i++){
                this.stepLi[i].index=i;
                //イベントをliタグにバインドします this.stepLi[i].onmouseover=function(e){    
                    var myIndex=this.index;
                    This.onOver(This.line,(myIndex*162+55));
                    };
                this.stepLi[i].onmouseout=関数(){            
                   This.line.style.left=myIndex*162+55+'px';
                    };    
                
                }
            };
        //マウス処理関数を定義する animationHover.prototype.onOver=function(obj,target){
            これ=これ;
            タイマー間隔をクリアします。
            this.target=ターゲット;
            タイマー = setInterval(関数(){
                var target=This.target; // ターゲット ポイントを停止します var attrValue=parseInt(This.getStyle(obj,'left')); 
                var dx=target-attrValue; //ターゲットポイントからの「距離」
                var 速度 = 1/10 * dx;
                速度=速度>0?Math.ceil(速度):Math.floor(速度); 
                            // 丸めによるジッターを防ぐ if(target==attrValue) clearInterval(timer); 
                            //目標地点に到達したらタイマーをオフにし、そうでなければ{
                    obj.style.left=attrValue+speed+'px';
                }
                },100);
                                    
            };
        //現在のタグオブジェクトの CSS 属性値を取得します。animationHover.prototype.getStyle = function (obj, attr) {                    
            （obj.currentStyle）の場合{                
                obj.currentStyle[attr]を返します。
            }それ以外{
                getComputedStyle(obj,false)[attr]を返します。
            }
            };    
</スクリプト>