Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    424
    Thanks
    8
    Thanked 6 Times in 6 Posts

    How do I display a div on hover of <p>?

    I want to display a specific div based on hovering over an element with a specific class.
    Currently, the two elements are unrelated (they are not parents, children, or siblings of each other).

    Here are some BASIC examples of the premise:
    HTML
    Code:
    <p class="authBob">Bob says "Hi"</p>
    <p>
        <span class="authHarry">Harry says "How you doin'?"</span>
        <span class="authJoe">Joe says "Leave me alone".</span>
    </p>
    <p class="authSally">Sally says "Pleased to meet you"</p>
    
    <div class="about" id="bob">
        <p>Bob is a simple guy</p>
    <div><div class="about" id="harry">
        <p>Harry likes to be in the midst of whatever's going on</p>
    <div><div class="about" id="joe">
        <p>Joe is a hermit</p>
    <div><div class="about" id="sally">
        <p>Sally is always pleasant and enjoyable company</p>
    <div>
    CSS
    Code:
    div.about{
        display:none;
        width:25em;
        position:fixed;
        bottom:0;
        right:5em;
    
    Edit: } .authBob:hover{ ??? display div#bob ??? } .authHarry:hover{ ??? display div#harry ??? } .authJoe:hover{ ??? display div#joe ??? } .authSally:hover{ ??? display div#sally ??? }
    How can this be done?

    ~ mo
    Last edited by mOrloff; 11-26-2009 at 06:13 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Currently, the two elements are unrelated (they are not parents, children, or siblings of each other).
    In that case you'd need to use some javascript, but let me ask, can't you make some parent-child relationship there? (After all, CSS stands for cascading stylesheet.)

    PS: 1)
    div.authBob:hover{
    ??? display div#bob ???
    }
    Hope you meant p there.
    2) You can't nest a block level element inside <p> in any case.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    424
    Thanks
    8
    Thanked 6 Times in 6 Posts
    ... Hope you meant p there.
    Oops, yeah, that was a type-o. I edited accordingly.
    ... You can't nest a block level element inside <p> in any case.
    If you are saying no <div>'s inside <p>'s, then thanks. I thought so, but it's always good to get a reminder.

    ... can't you make some parent-child relationship there? ...
    Well, not really.

    The content is pretty long, and switching back and forth from one author to another, then back again.
    These are pages of educational content which are a result of a collaborative effort from 4 authors, so making the "about" sections children, unfortunately, isn't really practical.

    Any more advice?

    TIA,
    ~ Mo

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Any more advice?
    Yes, as i said above you'd need to use javascript inside the onmouseover/onmouseout attributes.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    424
    Thanks
    8
    Thanked 6 Times in 6 Posts
    Any suggestions (code structures or css tricks) on how to achieve our goal via CSS???

    For this, I'd prefer to stay away from anything that is so easy to disable. We gave our word that the appropriate references would be made.
    (Obviously, I'd like to stick with CSS if at all possible.)

    Even hair-brained ideas are welcome.
    Sometimes those are the mad beginnings of something brilliant.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •