Nested Elements don't trigger their hover states during/after transition - html

Question

So here's my fiddle
HTML
<div class="container">
<div class="cardItem">
<h1>Mouse over me</h1>
<p>Keep moving the mouse during transition</p>
<p>Also have the mouse still over where the new
paragraph will come before the transition finishes</p>
<div class="cardHoverSide">
<p>See if my hover state still
fires despite your <span>crazy</span> mouse movements</p>
<div class="cardItem">NestedCard With Hover!</div>
</div>
</div>
</div>
CSS
.container {
overflow: hidden;
height: 17em;
width: auto;
}
.cardItem {
position: relative;
float: left;
margin: 0 .35em;
border: none;
background: #444;
color: #eee;
width: 10em;
height: 17em;
-moz-transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
-o-transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
-webkit-transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
transition: transform .3s cubic-bezier(0, 0.59, 0, 0.99);
}
.cardHoverSide .cardItem {
width: 60%;
height: 50%;
}
.cardHoverSide .cardItem:hover {
background: #eee;
color: #222;
transform: initial;
}
.cardItem:hover {
-moz-transform: translate(0, -17em);
-ms-transform: translate(0, -17em);
-o-transform: translate(0, -17em);
-webkit-transform: translate(0, -17em);
transform: translate(0, -17em);
-moz-transition: transform .3s cubic-bezier(1, .01, 1, .41);
-o-transition: transform .3s cubic-bezier(1, .01, 1, .41);
-webkit-transition: transform .3s cubic-bezier(1, .01, 1, .41);
transition: transform .3s cubic-bezier(1, .01, 1, .41);
}
.cardHoverSide {
border: none;
background: #eee;
color: #444;
width: inherit;
height: inherit;
position: absolute;
bottom: -17em;
}
.cardHoverSide p span:hover {
color: red;
}
h1, h2, p {
margin: .5em .3em;
padding: 0;
}
I want the hover state of each nested element to be fired anytime the mouse is over that element. For instance when you are moving the mouse in the empty space of the nested card it doesn't seem to always trigger the hover state consistently.
The nested span tag also has some issues... don't know if I've set up the CSS incorrectly/not with best practices - or if I need to be using JS to trigger that.
Thanks for reading! All help is greatly appreciated.
Edit Updated fiddle
I'm specifically interested in when the mouse is stationary after initiating the transition - it seems on chrome the hover state does not fire on the child elements (so in the fiddle the p tag or nested panel don't change states). I've been able to consistently repeat this behavior on the updated fiddle.