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

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2

    Want div to change bg image when hovered over another div


    So I have a drop down menu button like this,

    Code:
    <div id=menu>
       <ul id="menu1">
          <li id="menulist">
             <a href="">
                <div id="menubtn">
                </div>
             </a>
             <ul id="menulist-ul">
                 <li id="menulist-li">
                    <div id="menulinks-container">
                       <div id="menulinks">
                          <a href=""></a>
                          <a href=""></a>
                       </div>
                    </div>
                 </li>
             </ul>
          </li>
       </ul>
    </div>
    And I have the css setup so the div, menubtn's background image is set when not hovered and set as a different image when hovered over. But I want the background image to change to the hovered image when the cursor is outside of the button and inside the dropdown menu. Is there a way of doing this with css? Thanks!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    You just need to apply the hover effect to the li instead
    Code:
    li#menulist:hover {
        // add hover state here
    }
    Can I also so that you can drastically reduce the amount of code / styling you are currently using by just applying the styles to the ul and li elements and sub elements in the containing #menu div. Also it is advisable to use classes instead of ids if you can in all your styling.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    awesome it works! thanks so much!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    Is there anyway to make the li have a link attached as well?
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Originally Posted by andy1212
    Is there anyway to make the li have a link attached as well?
    Sorry, not quite sure what you mean?
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    I expect he wants clicking outside the link to also act like clicking on the link itself would. That's only possible with the addition of some JavaScript.

    andy1212, would you mind explaining why you want to do that?

    Originally Posted by simplypixie
    Also it is advisable to use classes instead of ids if you can in all your styling.
    Welcome back, simplypixie.

    Some IDs are good, but I agree that that looks like too many. It would be better to replace most of those with classes.
    Last edited by Kravvitz; September 16th, 2013 at 11:46 PM.
    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).
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Originally Posted by Kravvitz
    Welcome back, simplypixie.

    Some IDs are good, but I agree that that looks like too many. It would be better to replace most of those with classes.
    Thank you Kravvitz

    I agree, especially if you need to reference them with jquery and if you know that the div will definitely only be used once in a file (i.e. a main wrapper for the layout).
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    Ok thanks, what I meant was, before when I hovered over the div I had an <a> tag wrapped around it so it could be clicked and would go to a different page. Now the <li> replaces the <a> tag and <div> and works great for showing the hover state when the cursor is in the drop down menu but is there a way of making the main menu button still clickable or a link. It's hard to describe so i guess I will try to draw it out.

    way it was set up before:
    Code:
    <li>
       <a> // this was clickable and would go to another page if clicked.
          <div>
          </div>
       </a>
       <ul>
          <li>
             <div>
             </div>
          </li>
       </ul>
    </li>
    way it's set up now:
    Code:
    <li>
       // took out the <a> and <div> tags because they don't serve any purpose now that the li tag contains the button image and controls the hover state. However, is it possible to add a link in here somewhere so when the main menu button image or <li> is clicked on, it goes to a different page?
       <ul>
          <li>
             <div>
             </div>
          </li>
       </ul>
    </li>
    But you guys mentioned javascript so I will look into how to set that up! Thanks again.
    Last edited by andy1212; September 17th, 2013 at 11:06 AM.
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    You still need the a tag to create a link (not sure why you removed it to be honest)
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    nvm I figured it out. You were right I needed to keep the a tag in there and just added the css to make the link span the size of the button in the li and it works.

IMN logo majestic logo threadwatch logo seochat tools logo