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} ，然后您可以选择目标div直接通过 id 。

如果您希望它们在初始页面加载时都不可见，只需在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，然后显示/隐藏它。假设使用了链接，例如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
}

JQUERY - 如何将两个元素 - IMG - DIV悬停在IMG上时显示/隐藏DIV - 在img allready上添加了hover hide / show

2 个答案: