CODEWITHSUNDEEP
htmlcss
raiyan106
raiyan106

Reputation: 85

How can i make a hidden para visible by hovering over a link?

Here is the following code. I am not sure, please check this out. How can I connect two tags using ids? Is it something like this?

<!DOCTYPE html>
<html>
<head>
<style>

#hide{
display:none;
}
a:hover
{
display:block;
}

</style>
</head>

<body>

    <p> Hover over the link to display a para <a href="#hide">Link</a></p>
    <p id="hide">THis paragraph was hidden inside the above para :D </p>


</body>
</html>

Upvotes: 0

Views: 99

Answers (4)

Mooseman
Mooseman

Reputation: 18891

You can, if the two elements are siblings. (With the current markup, you would need to use JS)

<a>Link</a>
<p id="hide">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

and

p{
  display: none;
}
a:hover + p{
  display: block;
}

Demo: http://jsfiddle.net/pa22m/

If you want a fade transition:

p{
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}
a:hover + p{
  height: auto;
  opacity: 1;
}

Demo: http://jsfiddle.net/XD6Xu/

Upvotes: 1

Giannis Tzagarakis
Giannis Tzagarakis

Reputation: 530

why dont you just use a javascript script like this one

<script>
    function func(){
        document.getElementById('rev').style.display ='block';
    }
</script>

<p onMouseOver=func();>Hover over the link</p>
<div id="rev" style="display:none;">
    <p>this is the hidden paragraph</p>
</div>

so when you mouse over the 1st paragraph, the second one appears ;)

Upvotes: 0

DRD
DRD

Reputation: 5813

To do it with CSS you'll need to change the structure of the markup: http://jsfiddle.net/xEfbL/.

HTML

<div>Hover over the link to display a para <a href="">Link</a>
    <p>THis paragraph was hidden inside the above para :D </p>
</div>

CSS:

div > a + p {
    display: none;
}

div > a:hover + p {
    display: block;
}

Upvotes: 1

amol
amol

Reputation: 1555

You can use jQuery, if you want a same HTML structure

DEMO

  $( "a" )
  .mouseenter(function() {
    $('#hide').show();
  })
  .mouseleave(function() {
    $('#hide').hide();
  });

Upvotes: 0

Related Questions