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

Question

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 ?

Answer 1

This is probably not the most elegant 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").mouseout(function () { $(this).stop().fadeTo('fast', 1.0, function(){
       $(this).parent().prev('div').children().eq(0).hide();
}) });

Another option is to give and id attribute to each img that also contains {@id}, then you can select the target div directly by id.

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

Answer 2

As I am not familiar with umbraco and your structure, I will try to ilustrate it on this example:

$(document).ready(function() {
    // this will hide the div when the DOM is ready
    $('#page-1').hide();

    $(".ExcommKnap").mouseover(function() {
        $(this).fadeTo('fast', 0.5, function() {
           url= $(this).parent().attr('href').split('/');
           $('#page'+url[url.length-1]).hide();
        });          
    }).mouseout(function() {
        $(this).fadeTo('fast', 1.0, function() {
           url= $(this).parent().attr('href').split('/');
           $('#page'+url[url.length-1]).hide();            
        });
    });
});

This code will hide the div when the DOM is ready. When you hover over your image it will get href attribute of its parent and get the id and then show/hide it. Assuming the link used, e.g. something/something/1 (as I have used here) etc., in the href would end with the same id, as the page. Otherwise you can use some other method, like Botondus provided. Also if you have more, which I guess you have, divs with a number in them, you can hide them like this, if you add some class to their parent div

$('.parent_div div').each(function {
    $(this).hide();
});

There would be a second option, as to hide the div, with the use of window.onload

window.onload = function() {
  // code to hide the div
}