how Two elements - IMG - DIV when hover over IMG show/hide the DIV - added with hover hide/show on i
- by Jan Fosgerau
Im very new to the wonder that is jquery.
and i just figure out how to make my img buttons show/hide with a opacity difference (as such)
<script type="text/javascript">
<![CDATA[
$(".ExcommKnap").mouseover(function () { $(this).stop().fadeTo('fast', 0.5, function(){}) });
$(".ExcommKnap").mouseout(function () { $(this).stop().fadeTo('fast', 1.0, function(){}) });
]]>
</script>
which is good and all. but i also need to make the button when hovered over show text just above it that is specific to that button.
i made these here elements that are looped in a for each.
<div style="top:10px; width:755px;text-align:right; position:absolute; ">
<div id="Page-{@id}" class="headlinebox">
<xsl:value-of select="@nodeName"/>
</div>
</div>
<a href="{umbraco.library:NiceUrl(@id)}">
<img class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}" />
</a>
i need to make the individual text appear when hovered over its button.
hence i have the id="page-{@id}" looped out along and need to get this place in the jquery code i presume.
so when i hover over a img class="ExcommKnap" it makes the correct text visible.
But i need the div id="page-{id}" to be invisible to begin with on pageload and then visible when its button is being hovered over. can anyone help ?
