javascript - 画像を置き換えるときの onmouseover

Question

私がやっていることは、画像を別の画像に置き換えることです (実際には、その表示と src プロパティを変更するだけです)。if 条件を削除するとonmouseover機能しますが、他のイベントは機能したいので機能しません。

<strong onmouseover='if(this.lastChild.style.display=="none")    {this.lastChild.style.display="inherit";}'     onmouseout='if(this.lastChild.style.display=="inherit"){this.lastChild.style.display="none";}' onclick='menuArrow(this, "<?php echo site_url(); ?>")'><?php the_sub_field('feature_title'); ?> <img id="menu-arrow" src="<?php echo site_url(); ?>/wp-content/themes/orange/img/triangle-down.png" onclick="menuArrow()"></strong>

    function menuArrow(obj, url)
    {
        if(obj.lastChild.src == (url + "/wp-content/themes/orange/img/triangle-down.png")){
            obj.lastChild.src = url + "/wp-content/themes/orange/img/triangle-up.png";
            obj.lastChild.style.display = "inline";
        } else {
            obj.lastChild.src = url + "/wp-content/themes/orange/img/triangle-down.png";
            obj.lastChild.style.display = "inherit";
        }
    }

displayプロパティを使用しinheritて、メニューオプションが選択されていないことを示しています。noneプロパティは、それが選択されておらず、マウス ポインターがその上にないことを意味します。inlineメニューオプションが選択されていることを意味します。基本的に、ページの読み込み時に画像は表示されません。マウス ポインタがメニュー オプション上にあると、最初の画像が表示されます。クライアントがメニュー オプションをクリックすると、最初の画像が 2 番目の画像に変わります。

問題は、メニュー オプションをクリックしないと、(displayが に設定されていてもnone) 画像が表示されないことです。前述したように、if ステートメントを使用すると機能し始めますが、クライアントがポインターを離すと、画像が選択されていても画像が消えます。