JQUERY - 어떻게 두 가지 요소 - IMG - DIV IMG 위에 마우스를 올리면 DIV 표시/숨기기 - 호버와 함께 추가 숨기기/표시 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 class = "ExcommKnap"위로 마우스를 가져 가면 올바른 텍스트가 표시됩니다.

하지만 div id = "page- {id}"가 있어야 pageload에서 시작한 다음 해당 버튼을 마우스로 가리키면 표시 될 수 있습니다. 누구든지 도와 줄 수 있습니까?

Answer 1

이 아마 대상 사업부를 선택하는 가장 우아한 방법은 아니지만 작동합니다 :

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

또 다른 옵션도 가 포함 된 각 IMG에 ID를 속성을 제공하는 것입니다 { @ id}이면 id으로 대상 div를 직접 선택할 수 있습니다.

초기 페이지로드시 모두 보이지 않게하려면 style = "display : none"을 HTML로 설정하십시오. 내가 umbraco과 구조에 익숙하지 않은 오전으로

Answer 2

,이 예에 그것을 ilustrate하려고합니다 : DOM을가 준비되면

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

이 코드는 사업부를 숨 깁니다. 이미지 위로 마우스를 가져 가면 부모의 href 속성을 얻고 ID를 얻은 다음 표시하거나 숨 깁니다. 링크가 사용된다고 가정합니다. something/something/1 (여기에서 사용한대로) 등 href에서 페이지와 동일한 ID로 끝납니다. 그렇지 않으면 Botondus와 같은 다른 방법을 사용할 수 있습니다. 당신은 내가 당신이 생각하는 이상이있는 경우 또한, 당신이 그들의 부모 DIV 몇 가지 클래스를 추가 할 경우, 다음과 같이 그들을 숨길 수 있습니다, 그들의 숫자로 된 div

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

두 번째 옵션 등이있을 것입니다 div를 숨기려면 window.onload를 사용하십시오.

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