JQUERY - 如何两个元素 - IMG - DIV 当鼠标悬停在 IMG 上时显示/隐藏 DIV - 在 img 上添加悬停隐藏/显示

Question

我对 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}" 在页面加载时不可见，然后在其按钮悬停时可见。有人可以帮忙吗？

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

另一个选择是为每个也包含 的 img 提供 id 属性{@id}，那么就可以直接通过id选择目标div。

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

Answer 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，然后显示/隐藏它。假设href中使用的链接，例如something/something/1（正如我在这里使用的）等，将以与页面相同的id结尾。否则，您可以使用其他方法，例如 Botondus 提供的方法。另外，如果你有更多，我猜你有，里面有数字的div，你可以像这样隐藏它们，如果你向它们的父div添加一些类，

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

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

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