SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show element2 when hovering element1?

    I have an icon, and when i hover this icon i want to show a paragraph.

    Code HTML4Strict:
    <p>TEXT</p>
    <i class="icon"></i>
    Code CSS:
    p{
    opacity: 0;
    }
     
    ???

    how do i do this?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The objects have to be related in some way, such as...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <meta name="viewport" content="width=device-width">
        <title>show on hover</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1164530-show-element2-when-hovering-element1
    show element2 when hovering element1? 
    ReGGaeBOSS
    2013.08.16 17:36
    -->
        <style type="text/css">
    
    .i {
        display:inline-block;
    }
    p {
        display:none;
    }
    .i:hover p {
        display:block;
    }
    
        </style>
    </head>
    <body>
    
    <div class="i">
        <img src="http://placehold.it/100x100" alt="">
        <p>This is a paragraph</p>
    </div>
    
    </body>
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You really CANT do it the way you have asked.
    if you could reverse mark up structure, then you could easily do this:
    Code:
        <i class="i"></i>
         <p>TEXT</p>
    i{ background:url("http://placehold.it/100x100); height:100px; width:100px; display:inline-block; } /*block or inline-block is needed here  so  dimensions can be given*/
    .i +p{opacity: 0;}
    .i:hover +p{opacity: 1;}
    the magic is the adjacent sibling selector. This btw, is why you needed to reverse your code as this selector targets then NEXT element in the markup and not the prev ; CSS is like time it flows only forward !

    OK.. that how is COULD be done.

    But before you camper of to implement this a few EXTRA notes:

    As you saw, there are OTHER attributes to hide/show elements. ronpat used "display:none;" but but that would take the element out as if it just want there at all ( maybe you want this maybe you don't). Also display:none is not very accessible... consider using AP.
    IF you only want to HIDE the visibility of the element why not use just that: visibility:hidden; The element will be there , just invisible. Less fuzz and more backwards compatible than opacity:0; unless there was a specific reason for using opacity.

    Also, while it's completely valid... having inline elements and block elements as siblings is considered bad practice. Consider using a DIV for your icon, or maybe contain the 'text' in a SPAN all wrapped in a P, as such:
    Code:
        <p><i class="i"></i><span>This is a paragraph</span></p>
    Well that's the gist of it. Hope hat helps.


Bookmarks

Posting Permissions

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