jQuery in Wordpress with Elementor-CodePudding

I am trying to use jQuery to indicating right parts with pointers on 2D drawings. but css of pointers and images are not getting changed by jQuery I wrote. now sure why, jQuery seems not working on Wordpress with Elementor?

when mouse gets hovered on the img of the parts, pointer should light up in the 2D drawing.

here is what I tried,

<script>
jQuery(function(){
    
    show_scroll_ele();
    
    //product hover
    jQuery(".product li").mouseenter(function(){
        var temp_idx=$(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".pointer span").eq(temp_idx).addClass("selected");
    });
    jQuery(".pointer span").mouseenter(function(){
        var temp_idx=$(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".product li").eq(temp_idx).addClass("selected");
    });
}); 
});

</script>

<div >
        <div >
            <ul>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro01.png" alt="Pintle"></div>
                    <p>Pintle</p>
                </li>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro02.png" alt="Connecting Rod"></div>
                    <p>Connecting Rod</p>
                </li>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro03.png" alt="Shaft"></div>
                    <p>Shaft</p>
                </li>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro04.png" alt="Propeller Shaft"></div>
                    <p>Propeller Shaft</p>
                </li>
            </ul>
        </div>
        <div >
            <span >Pintle</span>
            <span >Connecting Rod</span>
            <span >Shaft</span>
            <span >Propeller Shaft</span>
            <img src="/wp-content/uploads/2022/08/ship_pointer.png" alt="도면이미지">
        </div>
        
        <div ></div>
</div>


and css is 
`.product_wrap{margin-top:60px;}
.product_wrap .product{float:left;width:600px;}
.product_wrap .product ul{text-align:center;}
.product_wrap .product ul li{float:left;margin:0 24px 4px 0;cursor:pointer;}
.product_wrap .product ul li .img{border:1px solid #ddd;}
.product_wrap .product ul li p{font-size:13.4px;font-weight:300;color:#333;padding:7px 0;letter-spacing:0.4px;}
.product_wrap .product ul li.selected .img{border:1px solid #0A96E8;}
.product_wrap .product ul li.selected p{color:#0A96E8;}
.product_wrap .pointer{float:right;position:relative;width:570px;}
.product_wrap .pointer span{display:block;position:absolute;font-size:12.2px;font-weight:400;color:#222;line-height:26px;padding:0 10px;border:1px solid #aaa;background-color:#fff;letter-spacing:0.4px;cursor:pointer;}
.product_wrap .pointer span.selected{border:1px solid #0A96E8;background-color:#0A96E8;color:#fff;}

.product_wrap .ship span.point01{top:167px;left:40px;}
.product_wrap .ship span.point02{top:320px;left:420px;}
.product_wrap .ship span.point03{top:203px;left:248px;}
.product_wrap .ship span.point04{top:283px;left:210px;}`

CodePudding user response：

@Michael O'dlee, Your problem seems to be the undefined function show_scroll_ele();

I have created a fiddle with the call to this function commented out. The mouseover now causes the changes I think you want:

https://jsfiddle.net/1k86rtz2/1/

(Note I have simplified and formatted your CSS, and exaggerated the changes in the CSS [for my sake]. The changes to the CSS are not required for my solution.)

CodePudding user response：

I was able to make it work !

final code below,

<script
  src="https://code.jquery.com/jquery-3.6.2.js"
  integrity="sha256-pkn2CUZmheSeyssYw3vMp1 xyub4m e QK4sQskvuo4="
  crossorigin="anonymous"></script>
<script type="text/javascript">>

jQuery(function(){
    
    //product hover
    jQuery(".product li").mouseenter(function(){
        var temp_idx=$(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".pointer span").eq(temp_idx).addClass("selected");
    });
    jQuery(".pointer span").mouseenter(function(){
        var temp_idx=$(this).index();
        jQuery(".product li").removeClass("selected");
        jQuery(".pointer span").removeClass("selected");
        jQuery(this).addClass("selected");
        jQuery(".product li").eq(temp_idx).addClass("selected");
    });
}); 

</script>

.product_wrap{
        margin-top: 60px;
}
.product{
        float: left;
        width: 600px;
}
.product ul{
        text-align: center;
}
.product ul li{
        float: left;
        margin: 0 24px 4px 0;
        cursor: pointer;
}
.product ul li .img{
        border: 1px solid #ddd;
}
.product ul li p{
        font-size: 13.4px;
        font-weight: 300;
        color: #333;
        padding: 7px 0;
        letter-spacing: 0.4px;
}
.product ul li.selected .img{
        border: 5px solid #0A96E8;
}
.product ul li.selected p{
        color: #0ff;
}
.pointer{
        float: right;
        position: relative;
        width: 570px;
}
.pointer span{
        display: block;
        position: absolute;
        font-size: 12.2px;
        font-weight: 400;
        color: #222;
        line-height: 26px;
        padding: 0 10px;
        border: 1px solid #aaa;
        background-color: #fff;
        letter-spacing: 0.4px;
        cursor: pointer;
}
.pointer span.selected{
        border: 5px solid #f00;
        background-color: #0A96E8;
        color: #fff;
}

.point01{
        position: absolute;
        top: 167px;
        left: 40px;
}
.point02{
        position: absolute;
        top: 320px;
        left: 420px;
}
.point03{
        position: absolute;
        top: 203px;
        left: 248px;
}
.point04{
        position: absolute;
        top: 283px;
        left: 210px;
}

<div >
        <div >
            <ul>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro01.png" alt="Pintle"></div>
                    <p>Pintle</p>
                </li>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro02.png" alt="Connecting Rod"></div>
                    <p>Connecting Rod</p>
                </li>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro03.png" alt="Shaft"></div>
                    <p>Shaft</p>
                </li>
                <li >
                    <div ><img src="/wp-content/uploads/2022/08/ship_pro04.png" alt="Propeller Shaft"></div>
                    <p>Propeller Shaft</p>
                </li>
            </ul>
        </div>
        <div >
            <span >Pintle</span>
            <span >Connecting Rod</span>
            <span >Shaft</span>
            <span >Propeller Shaft</span>
            <img src="/wp-content/uploads/2022/08/ship_pointer.png" alt="도면이미지">
        </div>
        
        <div ></div>
</div>