show/hide div on mouseover

Discussion in 'HTML & Website Design' started by nehrav, Nov 16, 2009.

0
  1. #1
    Hi,

    I am trying to show/hide div on mouse over/out respectively.
    And I am able to do that too.
    But problem exist with the float.

    Whatever i am doing now is with the absolute div, so when ever design
    get opened in big screen, div get showed at wrong place.

    Plz suggest me, floating div on mouseover.

    Thanks
     
    nehrav, Nov 16, 2009 IP
  2. white10

    white10 Peon

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Put your absolute div inside a relative positioned div, your absolute div will now only appear in the borders of the relative div,
     
    white10, Nov 16, 2009 IP
  3. AndreasB

    AndreasB Peon

    Messages:
    280
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Maybe using jQuery? :)
     
    AndreasB, Nov 16, 2009 IP
  4. nehrav

    nehrav Peon

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    it's not working, div still react as absolute.....can u show me any working example??
     
    nehrav, Nov 17, 2009 IP
  5. nehrav

    nehrav Peon

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    which query u talking about??
     
    nehrav, Nov 17, 2009 IP
  6. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Here's a demo

     
    unigogo, Nov 17, 2009 IP
  7. MrKushhy

    MrKushhy Peon

    Messages:
    67
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Google: Show/hide div with jquery. problem solved.
     
    MrKushhy, Nov 17, 2009 IP
  8. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Show/hide div is a more css problem than a jquery problem.
     
    unigogo, Nov 17, 2009 IP
  9. nehrav

    nehrav Peon

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Everything is perfect, but it's visible on page load. I want it to be hidden on pageload. How to do that....??
     
    nehrav, Nov 17, 2009 IP
  10. MrKushhy

    MrKushhy Peon

    Messages:
    67
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    true, but cant be fixed with ease using jquery, thats what i was saying

     
    MrKushhy, Nov 17, 2009 IP
  11. white10

    white10 Peon

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    set the default display of the box class to none

    #box{position:absolute;width:100px;height:80px;background-color:#f11800;display:none;}
     
    white10, Nov 17, 2009 IP
  12. nehrav

    nehrav Peon

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    it's done successfuly with some modifications by your above suggested method.
     
    nehrav, Nov 19, 2009 IP