JQUERY - 如何兩個元素 - IMG - DIV當懸停在IMG上顯示/隱藏DIV - 添加與懸停隱藏/顯示在img上已準備好

我很奇怪是jquery的新奇。JQUERY - 如何兩個元素 - IMG - DIV當懸停在IMG上顯示/隱藏DIV - 添加與懸停隱藏/顯示在img上已準備好

，我只是弄清楚如何使我的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}」在頁面加載時不可見，然後在其按鈕懸停時可見。誰能幫忙？

來源

2010-06-18 Jan Fosgerau

這可能不是選擇目標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}，那麼你可以通過id直接選擇目標div。

如果您希望它們在初始頁面加載時都不可見，只需在HTML中設置style =「display：none」。

來源

2010-06-18 12:15:12

非常感謝你 - 它的作用就像一個魅力。希望你的大腦沒有融化到很多的閱讀畝描述我的問題:) *弓在reverance * – 2010-06-18 12:26:51

由於我不熟悉一把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屬性，並獲取該id，然後顯示/隱藏它。假設使用的鏈接，例如東西/東西/ 1（正如我在這裏使用的）等等，在href中會以頁面結尾的相同的id。否則，您可以使用一些其他方法，如提供的Botondus。此外，如果你有更多的，我猜你有，的div在其中一個號碼，就可以隱藏他們就是這樣，如果你增加一些類到父DIV

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

會有第二個選項，如隱藏div，使用window.onload

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

來源

2010-06-18 12:20:18 realshadow

JQUERY - 如何兩個元素 - IMG - DIV當懸停在IMG上顯示/隱藏DIV - 添加與懸停隱藏/顯示在img上已準備好

回答

相關問題