#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    Angry CSS first-child:hover to change another div


    Hello everyone,

    The goal is to affect another element using :hover via first-child.

    example:

    .class2{
    display:none;
    }

    .class1 li:first-child:hover + .class2 {
    display:block;
    }


    For some reason I cannot affect change on another class when first-child is used - does anyone know if this is possible?

    Thanks
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Welcome to DevShed Forums, jimbo45.

    We can't really tell what is wrong without seeing your HTML as well.

    P.S. When posting code, please place it between [code][/code] tags. If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0

    Improper use of the + operator


    I believe the + operator only works for tags directly after the one receiving the action.

    Example:

    CSS

    PHP Code:
    <style type="text/css">
    .
    class2{
    display:none;
    }

    .
    class1:hover + .class2 {
    display:block;

    </
    style
    HTML

    PHP Code:
    <div class="class1" style="border:1px solid #000000;">test class 1</div>

    <
    div class="class2" style="border:1px solid #000000;">test class 2</div
    It should work fine, except maybe in IE *rolls eyes*... Now, add a br tag in between the 2 divs and see what happens.

    Is javascript a possibility? I would recommend that.

    Goodluck!
    Last edited by khayhurst; January 29th, 2013 at 01:20 AM. Reason: oops forgot test case in there
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by khayhurst
    I believe the + operator only works for tags directly after the one receiving the action.
    Welcome to DevShed Forums, khayhurst.

    You mean "combinator", not "operator". Yes, the "+" only works for adjacent siblings. That's why there's also the "~" general sibling combinator.

    Originally Posted by khayhurst
    It should work fine, except maybe in IE *rolls eyes*
    Yeah, it won't work in IE6, but will in IE7+ (when not in "quirks mode"). However, in IE7 it may not work if there's an HTML comment between the two elements.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    Angry


    Hi Kravvitz, thank you for your response and welcoming me to the forums.

    I have the same problems when removing the '+' combinator.

    I am attemping to use :hover to affect another element. This works fine untill include the 'first-child' selector. I've included some examples including the HTML below:

    HTML Example:
    Code:
      
    <div class="class1">
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>
    </div>
    
    <div class="class2">Need this element to be hidden untill first-child li is hovered</div>
    CSS:
    Code:
    .class2{
    display:none;
    }
    
    .class1 li:first-child:hover  .class2 {
    display:block;
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0

    May not work with a nested element


    Thanks for the welcome and the correction Kravvitz.

    I tried putting the hover on class 1 instead and that worked and check this out.

    PHP Code:
    .class2{
    display:none;
    }

    .
    class1 li:first-child:hover~.class2 {
    display:block;

    PHP Code:
    <div class="class1">
      <
    ul>
      <
    li>Item 1</li>
      <
    li>Item 2</li>
      <
    li class="class2">Item 3</li>
      </
    ul>
    </
    div>
    <
    div class="class2">Need this element to be hidden untill first-child li is hovered</div
    I'm a little confused myself, it looks as if it will only work on nested elements of the same level and/or type?

    Edit: Got a little code happy I guess and didn't notice the link Kravvitz posted. The (~) is a general sibling combinator meaning they must have the same parent. The tilde will not work in this situation.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0
    Thanks guys for your help, css is just limited someone when trying to affect elements that are not a child, parent or next to the div you are using hover on.

    I the end i used jQuery, i posted my solution here: forums.devshed.com/javascript-development-115/jquery-if-true-statements-help-939262.html#post2853370

IMN logo majestic logo threadwatch logo seochat tools logo