Why does my table cell (occasionally) not exhibit 'hover' behaviour until I force element state using Chrome Developer Tools?

Question

I have a table, making use of the following CSS and HTML:

.price { 
    position:relative; 
    display:block; 
    text-align:center; 
}

.detail { 
    background: none repeat scroll 0 0 #EEEEEE; 
    color: #333333; 
    min-width:200px; 
    width:auto; 
    height: 0; 
    overflow:hidden; 
    left: 0; 
    position: absolute; 
    -webkit-transition: all .3s ease;  
    -moz-transition: all .3s ease;  
    -ms-transition: all .3s ease;  
    -o-transition: all .3s ease;  
    transition: all .3s ease; 
} 


.price:hover > .detail, .price:hover > .notmuchdata > .detail {
    display:block;
    overflow:auto; 
    left:0px;
    width: 120px;
    height:60px;
    z-index:10;
}

<table>
    <tr>
        <td class="price" style="background-color:white;text-decoration: line-through">1.56
            <div class="detail">1.7% @ 1.6</div></td>
    </tr>
</table>

The desired behaviour of this code is that when the user moves the mouse over the crossed-out numerical value, a div appears with further data.

In most cases, this code seems to function exactly as expected. However, occasionally a user reports that mouseovers are having no effect - the div is not appearing.

It has been difficult to replicate the issue successfully. However, on one occasion I was able to open up Chrome Developer Tools and inspect the cell. On this occasion, I used 'Force Element State' on the cell and set it to ':hover'. Having done so, the hidden div did appear.

So I suppose my general question is, why might the :hover pseudo-class not work (but only occasionally)? And yet demonstrate the expected behaviour when using the Dev Tools to force the hover state?

EDIT 1 In trying to make the problem as concise and clear as possible, I did not include the additional detail that the page makes use of AJAX requests in another area of the page. These have occasionally not returned the pure JSON they were intended to, causing a javascript error to appear on the console.

Answer 1

Difficult to say as I cannot reproduce it, but I would start by eliminating all non-essential CSS declarations (and making a class for the strikethrough -- though it's probably not the issue):

.price { 
    text-align: center; 
}

.strike {
    background-color: white;
    text-decoration: line-through;
}

.detail { 
    background: none repeat scroll 0 0 #EEEEEE; 
    color: #333333; 
    min-width: 200px; /* <-- why min-width:200px here, but width: 120px on hover?  */
    height: 0; 
    overflow:hidden; 
    left: 0; 
    position: absolute; 
    -webkit-transition: all .3s ease;  
    -moz-transition: all .3s ease;  
    -ms-transition: all .3s ease;  
    -o-transition: all .3s ease;  
    transition: all .3s ease; 
} 


.price:hover .detail {
    width: 120px;
    height: 60px;
}

<table>
    <tr>
        <td class="price strike">1.56
            <div class="detail">1.7% @ 1.6</div></td>
    </tr>
</table>