locked
Parent element is not 'actived' when clicking child element.

    Question

  • Hi,

    The demo code will show my puzzle:

    default.html:

       <div style ="" class ="parentdiv">
           <img src ="/images/1.jpg" style ="" class ="childimage"/>
       </div>

    default.css:

    .parentdiv {
        width: 200px;
        height: 120px;
        background-color: rgba(0,0,255,0.6);
    }
    
        .parentdiv:hover {
            opacity: 0.7;
        }
    
            .parentdiv:hover:active {
                opacity: 0.1;
            }
    
    .childimage {
        width: 150px;
        height: 100px;
        margin-left: 20px;
        margin-top: 10px;
    }


        As you see, the code is simple.

        When I move mouse over the image, the parent element of image can fire "pseudo-classes:hover" normally.

        But if I click the image, the parent element can not fire "pseudo-classes:active". And if I click the blue area, "pseudo-classes:active" can be fired normally. It seems that the image covered the div.

       I want that, if click the image, the parent div's "pseudo-classes:active" is also fired, What should I do?

    Sunday, June 16, 2013 4:16 AM

All replies

  • hi,

    If you want the img can fire as this div,you also define the img's hover just as following.

    .childimage:hover {
        opacity: 0.7;
    }
    
        .childimage:hover:active {
            opacity: 0.1;
        }

    Hope this helps
    Thursday, June 20, 2013 9:34 AM
    Moderator
  • Hi,

    If the div has another child element, I want the whole div's opacity is 0.1 when I click whatever the div or its child element. So I can not set the div's hover and his child's hover separately.

    I test the demo code in Chrome, it runs as what I want. But IE10.0 and Metro app does not. 

    Thursday, June 20, 2013 2:55 PM
  • Hi,<o:p></o:p>

    The opacity property is inherited. If you set opacity < 1 for an element, all
    its child elements will also have that < 1 value for opacity and you cannot
    change this.

    Hope this helps

    Wednesday, June 26, 2013 7:57 AM
    Moderator
  • Hi,

    Maybe you  have not yet grasped my question. 

    My problem is:

    If I have a div element which has more than one child elements. I want that whichever child I click, the whole parent div's opacity will change, only by CSS. Because js can do that simply.

    If I use these code:

    .parentdiv:hover:active {
                opacity: 0.1;
            }

     .childimage1:hover:active {
            opacity: 0.1;
        }

    When I click the child element, just the child element be actived. How can I set its parent element's opacity only by CSS selector? Is there parent selector in CSS3.0?


    • Edited by Lattimore Wednesday, June 26, 2013 1:34 PM some wrong words
    Wednesday, June 26, 2013 1:30 PM