css issue that I am struggling with?

Question

If you see My JSFiddler http://jsfiddle.net/7mfj7/2/. First time "Change Picture" directly showing on image. If I mouse over on image and come out from image. then it is working fine.

How to hide "Change Picture" first time and display on mouse over?

Answer 1

Rather then using child and parent to reference elements inside the jquery call. it will be easier to wrap each elements in it's own div . (i.e. the text in one div and the image in another) this will allows you to control the individual elements more specifically in the jquery and also apply styles easier.

Answer 2

Set it initially to display: none; if you do not want it to show when you first enter the page.

Then on your hover command, set it to .show()

http://jsfiddle.net/7mfj7/18/

Answer 3

In the CSS for .comment:

top: 400px;

That way it will load initially in the same place it gets moved to on mouseout.

Answer 4

Put this at the top of your $(function () { :

$('.comment').css({ "top": '400px' });

http://jsfiddle.net/7mfj7/10/

Answer 5

Add the style to the css

.comment{
  top: 400px;
}