JQUERY - как два элемента - IMG - DIV, когда наведите указатель мыши на IMG показать/скрыть DIV - добавлено с помощью hover hide/show на img allready

Question

Im очень новое для удивления, которое является jquery.

и я просто понять, как сделать мои IMG кнопки показать/скрыть с разницей непрозрачности (как таковой)

<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> 

это хорошо и все. но мне также нужно сделать кнопку, когда она зависает над текстом, расположенным над ним, что характерно для этой кнопки.

Я создал эти элементы, которые зацикливаются на каждом.

<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> 

Мне нужно сделать отдельный текст, если он нависает над его кнопкой. Следовательно, у меня есть id = "page - {@ id}", и вам нужно получить это место в коде jquery, который я предполагаю. поэтому, когда я наводил курсор на класс img = "ExcommKnap", он делает правильный текст видимым.

Но мне нужно, чтобы div id = "page- {id}" был невидим, чтобы начать с pageload, а затем виден, когда его кнопка зависнет. может ли кто-нибудь помочь?

Answer 1

Это, вероятно, не самый изящный способ выбора целевого DIV, но он должен работать:

$(".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(); 
}) }); 

Другим вариантом является предоставление и ID атрибута каждого IMG, который также содержит { @id}, то вы можете выбрать целевой div непосредственно на id.

И если вы хотите, чтобы все они были невидимыми при загрузке начальной страницы, просто установите style = "display: none" в HTML.

Answer 2

Поскольку я не знаком с Umbraco и вашей структуре, я буду стараться ilustrate его на этом примере:

$(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();    
     }); 
    }); 
}); 

Этот код будет скрыть DIV, когда DOM готов. Когда вы наведете над своим изображением, он получит атрибут href своего родителя и получит идентификатор, а затем отобразит/спрячет его. Предполагая используемую ссылку, например, что-то/что-то/1 (как я использовал здесь) и т. д., в href закончится с тем же идентификатором, что и страница. В противном случае вы можете использовать какой-то другой метод, например, Botondus. Кроме того, если у вас есть больше, что я предполагаю, что у вас есть, дивы с числом в них, вы можете скрыть их, как это, если добавить некоторый класс к их родительским DIV

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

Там будет второй вариант, так как чтобы скрыть div, с использованием window.onload

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