Hot to Change child element's CSS when parent is hovered

In a gridview Remark column I am showing text remark and want to show detailed remark on mouse over on it, here is the code:

<div class="parent">
     Remark
    <div class="child">
        Text Block 1
    </div>
</div>

By default child element is hidden (display:none), when I try to show (display:block) the child element by using jquery/javascript every row child element is displayed, while I want to show only that one where user mouse overs.

Any CSS/JavaScript/jQuery solution for this problem?