Question

这是我的lehmans关于我想要完成的事情的条款。

我将有3个100x100 px div，向左浮动。

<div id="container">
     <div id="1">did you know?</div>
     <div id="2">help</div>
     <div id="3">other</div>
</div>

当您将鼠标悬停或鼠标悬停在这3个div中的任何一个上时，将通过show（）显示另一个div;或者slideDown（）;使用特定于该主题的内容。

问题是，有没有办法让它当你将鼠标悬停在任何div 1,2,3上时，另外两个会降低不透明度以使它们看起来透明？

那部分我无法弄明白......

提前感谢。

Answer 1

首先，请确保这些ID有效，例如不是以数字开头（除非您使用的是HTML5文档类型）。

然后您可以使用.animate()和.hover()，如下所示：

$("#container > div").css({opacity: 0.2 }).hover(function() {
  $(this).stop().animate({ opacity: 1 });
}, function() {
  $(this).stop().animate({ opacity: 0.2 }); 
});

You can try a demo here，最初的.css()调用是在页面加载时使它们全部不受影响。

要获得更完整的演示，请同时展示内容try this：）

以下是该示例标记：

<div id="container">
     <div>did you know?</div>
     <div>help</div>
     <div>other</div>
</div>

<div id="content">
    <div>Did You Know? Content</div>
    <div>Help Content</div>
    <div>Some other stuff</div>
</div>

和脚本：

$("#container > div").css({opacity: 0.2 }).hover(function() {
  $(this).stop().animate({ opacity: 1 });
  $("#content div").eq($(this).index()).stop(true, true).slideDown();
}, function() {
  $(this).stop().animate({ opacity: 0.2 });
  $("#content div").eq($(this).index()).stop(true, true).slideUp();
});

你当然可以调整它，让最后一个悬空的开放等等......这只是你想象的效果的想法。

Answer 2

这样的事情：

div.onmouseover = function() {
    for(i = 0, c = this.parentNode.childNodes, e = c.length; i < e; i++) {
        if (c[i] !== this) {
            $(c[i]).css('opacity', '...');
        }
    }
}

jquery显示/隐藏和不透明度

2 个答案: