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上已准备好

回答

相关问题