0

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

4

2 回答 2

0

这可能不是选择目标 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-18T12:15:12.013 回答
0

由于我不熟悉 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
}
于 2010-06-18T12:20:18.290 回答