foreach - JQUERY - how Two elements - IMG - DIV when hover over IMG show/hide the DIV - added with hover hide/show on img allready -

I am very surprised that jquery is

and I understand that my IGG button has the ambiguity difference ( Like how to show / hide

  & lt; Script type = "text / javascript" & gt; & Lt ;! [CDATA [$ (". ExcommKnap") Mouseover (function ($ {{(this). Stop () .FadeTo ('fast', 0.5, function () {})}); $ (". ExcommKnap"). Mouseout (function () {$ (this). Stop (). Feedto ('sharp', 1.0, function () {})}); ]] & Gt; & Lt; / Script & gt;  

Which is good and all

I have created these two elements hidden for everyone.

  & lt; Div style = "top: 10px; width: 755px; text-line: true; condition: complete;" & Gt; & Lt; Div id = "page - {@ id}" class = "headlinebox" & gt; & Lt; Xsl: Select the value = "@ nodename" /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; A href = "{umbraco.library: NiceUrl (@id)}" & gt; & Lt; Img class = "ExcommKnap" src = "{$ media / data [@ alias = 'umbracoFile']}" /> & Lt; / A & gt;  

I have to show personalized text when I see it in my text. So I have the ID = "page - {@ id}" and I need to get this place in the jquery code. So when I hover over an img class = "ExcommKnap" then this is the correct text that is visible.

But I need the div id = "page- {id}" so that the pageload is invisible to start up and then when its button is being shown above what can someone help?

This is probably not the best way to select the target div, but it should work:

  $ (".excommknap"). Mouseover (function {$ (this) .stop () .FadeTo ('fast', 0.5, function () {$ (this) .Parent) .prev ('div'). Children (). Eq (0) .show ();})}); $ (". ExcommKnap"). Mouse (function () {$ (this) .stop () .FadeTo ('fast', 1.0, function () {$ (this) .Parent (). Prev ('div'). Child (). Eq (0 ) .hide ();})});  

has another option and {@} has ID attribute for each img / Strong>

And if you want them invisible on initial page loads, just set style = "display: none" in HTML.