如何定位除了悬停在div上的同一类的所有div？ [英] How to target all divs of the same class except for hovered over div?

问题描述

我有一组div都有相同的类（他们不必有相同的类，如果它使这更容易）。理想情况下，我想要的是当一个用户悬停在这些div之一，其他div（每个背景图像）都变灰，将焦点放在当前悬停的覆盖的div。如果它是被徘徊在那个正在改变我会很好，但我真的不知道如何解决这个。某种兄弟选择器？我更喜欢只使用css，如果解决方案不能向后兼容，我很高兴。

这里是我的代码到目前为止。先感谢！

  .box：hover（SELECT ALL OTHER .BOX）{
 -webkit-filter：grayscale （100％）; 
 -moz-filter：grayscale（100％）; 
 -o-filter：gray（100％）; 
 -ms-filter：grayscale（100％）; 
 filter：grayscale（100％）; } 
  

编辑：我意识到我可以给每个盒子一个不同的类，然后说当盒子1案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案案

下面的解决方案仅在您的元素相邻时才会工作，例如导航栏。也许这不是你的情况，但它可以帮助别人。必须说它是跨浏览器的CSS2。

将< div> p>

 < div class =container> 
< div class =target>< / div> 
< div class =target>< / div> 
< div class =target>< / div> 
< div class =target>< / div> 
< div class =target>< / div> 
< / div> 
  

并使用它控制：hover / p>

  .target {
 background-color：＃444; 
} 
 .container {
 float：left; 
} 
 .container：hover .target {
 background：#bbb; 
} 
 .container .target：hover {
 background：＃444; 
} 
  

正在使用此处

I have a set of divs all with the same class (they don't have to have the same class if it makes this easier). Ideally what I want is when a user hovers over one of these divs the other divs (with a background image in each) all turn grey to put focus on the currently hovered overed div. If it was the div being hovered over that was changing I would be fine, but I really have no idea how to tackle this. Some kind of sibling selector? I would prefer to just use css and am happy if the solution is not backwards compatible.

Here is my code so far. Thanks in advance!

.box:hover (SELECT ALL OTHER .BOX) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%); }

edit: I realise I could give each box a different class, and then say when box 1 is hovered over, box 2,3,4 etc go grey, and do that for each.. but this seems like a lot of code for something simple.

解决方案

The solution that follows will work only if your elements are adjacent, like a navigation bar. Maybe that's not your situation, but it can help others. Must say that it is cross-browser CSS2.

Wrap your <div> inside a container:

<div class="container">
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
</div>

And use it to control :hover

.target {
    background-color: #444;
}
.container {
    float: left;
}
.container:hover .target {
    background: #bbb;
}
.container .target:hover {
    background: #444;
}

It's working here

这篇关于如何定位除了悬停在div上的同一类的所有div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！