JQUERY - как Два элемента - IMG - DIV при наведении курсора на IMG показать / скрыть DIV - добавлено с помощью мыши при наведении / показе на img уже - PullRequest
Новая
       10

JQUERY - как Два элемента - IMG - DIV при наведении курсора на IMG показать / скрыть DIV - добавлено с помощью мыши при наведении / показе на img уже

0 голосов
/ 18 июня 2010

Я очень новичок в удивлении, что это 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 class = "ExcommKnap", это сделает правильный текст видимым.

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

Ответы [ 2 ]

0 голосов
/ 18 июня 2010

Поскольку я не знаком с umbraco и вашей структурой, я попытаюсь проиллюстрировать его на этом примере: 

$(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 с числом в них, вы можете скрыть их следующим образом, если вы добавите некоторый класс в родительский div, как скрыть div, с использованием window.onload 

window.onload = function() {
  // code to hide the div
}
0 голосов
/ 18 июня 2010

Вероятно, это не самый элегантный способ выбора целевого 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.

...