在CSS中淡化未聚焦的对象

时间:2012-11-29 07:04:59

标签: css css3 object fade

我想知道是否可以选择三个项目,当它们没有悬停时,所有这些项目的不透明度都是1,而另一个项目的另外两个项目的不透明度是一半,或者“淡化” “,当我将鼠标悬停在一个上面时。

这是我到目前为止所尝试的,不幸的是,它已被证明是不成功的,因为我悬停在上面的物体的不透明度仍为.5。

 #mainLinks:hover { opacity: .5; }
 #mainLinks a{
      margin: 10px -10px 10px -10px;
      -webkit-transition: -webkit-transform .1s;
 }
 #mainLinks a:hover{
      -webkit-transform: scale(1.1);
      opacity: 1.5;
 }

感谢任何和所有帮助!请问我是否需要更多信息或澄清!

谢谢, 欧文

1 个答案:

答案 0 :(得分:2)

你快到了。

  1. 父级需要将完全不透明度设置为.5
  2. 悬停的项目需要将不透明度设置为1
  3. 示例HTML:

    <ol id="items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>​
    

    CSS:

    #items:hover > li { opacity: .5; }
    #items:hover > li:hover { opacity: 1; }
    

    我从你的例子中省略了转换/转换,但我认为你明白了。

    <强> JSFiddle