Show element2 when hovering element1?

HTML & CSS
1

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

<p>TEXT</p>
<i class="icon"></i>


p{
opacity: 0;
}

???

how do i do this?

2

The objects have to be related in some way, such as…


<!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

You really CANT do it the way you have asked.
if you could reverse mark up structure, then you could easily do this:


    <i class="i"></i>
     <p>TEXT</p>
i{ background:url("http://placehold.it/100x100); height:100px; width:100px; display:inline-block; } /*[I]block[/I] or [I]inline-block[/I] 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:

    <p><i class="i"></i><span>This is a paragraph</span></p>

Well that’s the gist of it. Hope hat helps.