使用jquery保持一个div的不透明度，减少悬停时的不透明度

我有点卡住了这个。这是我设置的基本轮廓：使用jquery保持一个div的不透明度，减少悬停时的不透明度

<div id="shell"> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
</div>

我期待，在.subelement的悬停，减少与子元素类，其余的div的不透明度。我知道如何在jQuery中使用悬停效果，只是不知道从哪里开始动画制作剩余的没有悬停的div。感谢任何建议。

更新：最终解决方案 - http://jsfiddle.net/yqPFH/

来源

2013-01-01 Alex

因此，你是说如果用户将鼠标悬停在一个div上，其余的div将会褪色，但是其中一个不会徘徊？ – Sethen

@Alex当鼠标在两个元素之间滚动时，您更新的解决方案会错过:) –

@ Mr.Alien是正确的。这也悬停在悬停状态。下面使用'animate'的Drew Baker提供的答案是不正确的。这不是'animate'用来做什么的。 'fadeTo'显然是最好的选择。检查我提交的答案，以便在悬停状态之间平滑过渡。 – Sethen

尽管这个问题已经有了答案，一个额外的答案只要我调整和已被删除。这里使用的是jQuery，当没有任何东西被徘徊时会丢失悬停状态。简单。

http://jsfiddle.net/kKHt4/3/

$(".subelement").hover(function() { 
    $(this).siblings().stop().fadeTo("fast", 0.5); 
}, function() { 
    $(this).siblings().stop().fadeTo("fast", 1.0); 
});

来源

2013-01-01 19:58:22 Sethen

小提琴有什么问题：p –

@Mr。外星人谢谢！我提供了一个新的。现在工作。 – Sethen

完美........ –

$("#shell .subelement").hover(function() { 
    $(this).css("opacity", 1).siblings().css("opacity", 0.6); 
});

http://jsfiddle.net/EV833/1

来源

2013-01-01 19:31:52 Dogbert

我喜欢这个，你只传递一个函数来'悬停'而不是两个，并利用方法链接。 – Sethen

工作完美无瑕。欣赏兄弟姐妹的用法（），希望能够学到新的东西。谢谢！ – Alex

嘿dogbert只是确保物品没有脱离不透明状态，即使你没有徘徊任何元素 –

我会一直使用CSS代替

Demo

Demo With Animations

HTML

<div id="shell"> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
</div>

CSS

#shell:hover { 
    color: rgba(0,0,0,.5); 
} 

.subelement:hover { 
    color: rgba(0,0,0,1); 
}

来源

2013-01-01 19:32:21

是的，这是做到这一点的正确方法。只有使用jQuery的理由是动画。 – Sethen

@SethenMaleno等我给你一个动画;） –

@SethenMaleno检查了这一点，也编辑了我的答案http://jsfiddle.net/Yw8yD/1/ –

问题两个部分：

1）你怎么只保留第一行不透明度：1和休息.5 2）一旦选择或徘徊，怎么办你保持不透明：1，直到你悬停/选择另一条线？

来源

2016-06-02 00:02:42 Violin

使用jquery保持一个div的不透明度，减少悬停时的不透明度

回答

相关问题