Grow your CSS skills. Land your dream job.

Ul li:hover with outside div control

  • # December 11, 2012 at 12:43 am

    I have a written a code in CSS for displaying image with text with transition effect..
    the code is something like this

    /*******HTML*********

    < div class=black-box> 

    • Hello There

    /*******CSS*********

    “”

    “class=black-box” i am using like a light box effect

    now i want to control

    “ul li:hover with .black-box”, how can i use that?? any idea

    # December 11, 2012 at 12:59 am

    @dhiruSingh Please post your code on http://codepen.io and paste the URL here.

    # December 11, 2012 at 3:50 am

    @chrisburton… here is the “http://codepen.io/dhiruSingh/pen/fkhuC”

    # December 11, 2012 at 4:04 am

    I have no idea what you’re trying to do. Are you trying to target the parent element here?

    .display-search ul li:hover ~ .display-search ul {}

    # December 11, 2012 at 4:08 am

    @jamy_za I think he wants to get the .black-box class, and I cannot for the life of me remember how to go back levels in CSS, as < doesn’t seem to be working…

    # December 11, 2012 at 4:14 am

    I mean with jQuery it would be easy, and I don’t do JS.

    $(‘li’).hover(function(){
    $(‘.black-box’).css(‘visibility’, ‘visible’);
    });

    [Here it is working](http://codepen.io/alexmccabe/pen/BgtpD “”)

    # December 11, 2012 at 4:14 am

    @alexmccabe You can’t go up or back in CSS. Perhaps that answers his question :p

    http://www.w3.org/TR/CSS2/selector.html#pattern-matching
    http://css-tricks.com/child-and-sibling-selectors/

    A solution could be, change the markup to work with CSS, or use JS.

    # December 11, 2012 at 4:16 am

    @jamy_za well then, the JS solution I just posted is the only way, I should imagine. I understand not ideal, but if the HTML needs to be laid out in that way, then it is his only option.

    Unless some CSS magician lives here.

    # December 13, 2012 at 1:15 am

    @jamy_za.. i want to control parent element with child element.. can i???

    @alexmccabe … i want to use pure CSS for that.. if there is only JS solution then i think must go with JS…

    # December 13, 2012 at 3:29 am

    CSS doesn’t provide any way to select a parent element. You can target children or siblings, nothing else.

    The best you can do in your case is black-box:hover ~ ul li which is -I guess- not what you were asking for.

    # December 13, 2012 at 3:32 am

    @hug… my req is little bit tricky… :P

    # December 13, 2012 at 5:34 am

    >my req is little bit tricky

    No, it’s impossible with CSS. Javascript is the solution.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".