I don't know if that is really what you are looking for but here is a jsFiddle. I find the result cool but maybe not very user-friendly. Think about adding hover style to your div, to explain to your users how to use your comment section.
There are several things to note about my implementation :
First, the use tabindex
in the HTML markup to be able to trigger keypress on a div. (Refer to this post). Aside of this, the markup is the same as yours.
The use of focus
and blur
to trigger the keypress event on the right div (the one hovered by the mouse).
And the mouseleave
to clear the keypress handler when you leave the div, so the comment section won't appear when you're hovering another div)
$('.divcontainer').mouseenter(function () {
var data_element = $(this).attr('data-element');
$(this).focus();
$(this).on("keypress", function() {
$('#innerdivcontainer' + data_element).show();
});
}).mouseleave(function(){
$(this).blur();
$(this).on("keypress", function(){});
});
Please tell me if this helps you in any way.