how to select element parent-child

Question

I have a structure like this:

<div class="home_box">
    <a href="#">
        <img alt="" src="/10829_rf-sicherheit/images/home_boxes/home1.jpg">
        <span class="box_caption" style="bottom: 0px;">
            <span class="box_title">Sicherheit</span>
            <span class="box_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor ...</span>
        </span>
    </a>
</div>

I want to access the .box_text when the link is hovered

Something like this in css

div.home_box a span.home_caption span.box_text {opacity:1;}

But this doesnt seem to work?!

Where is my mistake?

Isn't it just .home_box a:hover .box_text ? Your css is not working because you are not targeting the hover state and you don't have home_caption anywhere — Huangism
– Huangism, Commented Jul 14, 2014 at 19:34

War10ck · Accepted Answer · 2014-07-14 19:39:30Z

2

You'll need to fix both the incorrect class and the missing :hover pseudo class to make it work properly:

div.home_box a:hover span.box_caption span.box_text {
    opacity:1;
}

Note:

Opacity is not supported in all browsers without some vendor prefixes. In order to accomodate the maximum number of browsers, you'll need to add some additional CSS:

div.home_box a:hover span.box_caption span.box_text {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=100);

    /* Older than Firefox 0.9 */
    -moz-opacity: 1.0;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 1.0;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 1.0;
}

Source: CSS Tricks

Disclaimer: The above snippet came directly from CSS Tricks with two modification being. The first modification was the substitution of their .transparent selector for yours to make a complete snippet. The second was the changing of the opacity values to support your request of 1.

answered Jul 14, 2014 at 19:39

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BoltClock Over a year ago

It's 2014. I honestly don't think any of these extra properties are necessary anymore (even -ms-filter as an exception is debatable). If you still need to go through all the trouble to support non-IE browsers that came out ten years ago (before Firefox 1.0 was released and before WebKit came to existence), I pity you.

Jacob · Accepted Answer · 2014-07-14 19:33:43Z

1

have you tried using a:hover span.home_caption span.box_text {opacity: 1;}

Right now you're just specifying the a tag in general, not when it's being hovered.

answered Jul 14, 2014 at 19:33

Jacob

717 bronze badges

Comments

lante · Accepted Answer · 2014-07-14 19:31:49Z

0

Maybe if you:

div.home_box a span.box_caption span.box_text {
    opacity:1;
}

You write home_caption in your CSS and box_caption in your HTML

answered Jul 14, 2014 at 19:31

lante

7,3924 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

how to select element parent-child

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related