将鼠标悬停在按钮的子项上并不会触发它在IE和Firefox中的悬停状态

Question

我遇到一个问题，如果div在按钮内部，它将不会对Internet Explorer和Firefox中的鼠标事件做出反应。

是否有一种简单的方法可以更改此行为，因此它的行为与Chrome相同？ https://jsfiddle.net/JJDacan/trvv7t8e/4/

＆＃13;

＆＃13;

.ButtonTest
{
	background-color:green;
	width: 100px;
	height: 100px;
}

.ButtonTest:hover
{
	background-color: red;
}

.DivTest
{
	color: green;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 300px;
    border: 1px solid black
}

.DivTest:hover
{
	color: red;
}

＆＃13;

<button class="ButtonTest">
	<div class="DivTest"> Hover over me! </div>
</button>

＆＃13;

＆＃13;

＆＃13;