Question

我可能想办法在JS中做到这一点，但我想知道是否有办法在CSS中做到这一点。

我所拥有的是一个元素页面，精确的矩形和悬停我想要更改它们的opacity。目前我有这个：

.rectangle:hover{
    opacity:0.2;
}

效果很好。但我想要发生的是悬停我希望我悬停的那个让opacity完整（1.0）而其余的更改为低opacity（0.5）。像这样：

.rectangle:hover{
   opacity:1.0
      rectangle:nohover{
         opacity:0.5;
      }
}

我只想在悬停时更改opacity，因此设置矩形从一开始就具有不透明度0.5不是我需要的。

Answer 1

试试这个：

＆＃13;

.rectangle {
    width: 50px; height: 50px; background: red; border: 1px solid blue; margin: 5px;
}
.container { float:left }
.container:hover .rectangle {
    opacity: 0.2
}
.container:hover .rectangle:hover {
    opacity: 0.5
}

＆＃13;

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

＆＃13;

Answer 2

请尝试添加包装div。

ObservableCollection

Answer 3

如果所有rectangle共享一个共同的父母，则可以执行此操作。

#parent .rectangle {
    opacity: 0.2;
} 

#parent:hover .rectangle {
    opacity: 0.5;
}

#parent:hover .rectangle:hover {
    opacity: 1;
}

Answer 4

编辑：太慢了：p

HTML

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

CSS

.rectangle {
  opacity:0.7;
}
.container:hover .rectangle {
  opacity:0.5;
}
.container:hover .rectangle:hover {
  opacity:1.0;
}

只要所有矩形具有相同的父级，并且容器中没有其他对象

，这应该可以解决问题。

Answer 5

.rectangle{
   opacity : 0.5;
 }
.rectangle:hover{
   opacity : 1;
}

如何更改css中元素的不透明度？

5 个答案: