最も単純には、button の方に onmouseover を貼ると良いと思います。
<p>
button > img に mouseover
<button class="btn" type="submit" name="test" value="購入ボタン">
<img src="images/test.png" alt="テスト" onmouseover="alert(1)">
</button>
</p>
<p>
button に mouseover
<button class="btn" type="submit" name="test" value="購入ボタン" onmouseover="alert(1)">
<img src="images/test.png" alt="テスト">
</button>
</p>
<p>
img に mouseover
<img src="images/test.png" alt="テスト" onmouseover="alert(1)">
</p>
<p>
button > img に mouseover
<button class="btn" type="submit" name="test" value="購入ボタン">
<img src="images/test.png" alt="テスト" onmouseover="alert(1)">
</button>
</p>
<p>
button に mouseover
<button class="btn" type="submit" name="test" value="購入ボタン" onmouseover="alert(1)">
<img src="images/test.png" alt="テスト">
</button>
</p>
<p>
img に mouseover
<img src="images/test.png" alt="テスト" onmouseover="alert(1)">
</p>
Firefox は button 要素でのイベントの処理が特殊なようですね。
jQuery event bubbling on button not working as expected in Firefox - Stack Overflow
次点として、button を div に変更し、submit を自前で実装するなどがあると思います。