JQUERY - 如何两个元素 - IMG - 悬停在 IMG 上时的 DIV 显示/隐藏 DIV - 添加悬停隐藏/显示在 img allready答案

【问题标题】：JQUERY - how Two elements - IMG - DIV when hover over IMG show/hide the DIV - added with hover hide/show on img allreadyJQUERY - 如何两个元素 - IMG - 悬停在 IMG 上时的 DIV 显示/隐藏 DIV - 添加悬停隐藏/显示在 img allready
【发布时间】：2011-03-05 09:29:03
【问题描述】：

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

这很好。但我还需要在将鼠标悬停在其上方显示特定于该按钮的文本上时制作该按钮。

我在这里制作了这些在 for each 中循环的元素。

<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}" 在页面加载开始时不可见，然后在其按钮悬停时可见。谁能帮忙？

【问题讨论】：

标签： jquery foreach hover elements umbraco

【解决方案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。

如果您希望它们在初始页面加载时全部不可见，只需在 HTML 中设置 style="display:none"。

【讨论】：

非常感谢 - 它就像一个魅力。希望你的大脑不会因为阅读过多阅读我的问题的描述而融化:) 鞠躬

【解决方案2】：

由于我不熟悉 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();            
        });
    });
});

当 DOM 准备好时，此代码将隐藏 div。当您将鼠标悬停在图像上时，它将获取其父级的 href 属性并获取 id，然后显示/隐藏它。假设使用的链接，例如something/something/1 （正如我在这里使用的）等，在 href 中将以与页面相同的 id 结尾。否则，您可以使用其他方法，例如提供的 Botondus。此外，如果你有更多，我猜你有，其中有一个数字的 div，你可以像这样隐藏它们，如果你向它们的父 div 添加一些类

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

还有第二个选项，使用 window.onload 隐藏 div

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

【讨论】：