CODEWITHSUNDEEP
htmlcss
getaway
getaway

Reputation: 8990

How can I hide elements on a HTML page until a user hovers over it using CSS?

I want to hide a link on a HTML page, and only show it when the user hovers across it. How can I do this using CSS?

Upvotes: 2

Views: 14629

Answers (3)

Olex Ponomarenko
Olex Ponomarenko

Reputation: 913

If you want arbitrary code inside the link, like a picture, it's better to use the opacity attribute.

For example:

.hidden {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hidden:hover {
  opacity: 1;
}

Codepen: http://codepen.io/team/thinkful/pen/bb52d8326d532c1fbcc72f772a032a20

Upvotes: 2

user406632
user406632

Reputation: 1793

HTML:

<div class="hidden"><a href="blah">I can't see this</a></div>

CSS:

    .hidden 
    {
        width:100px;
        height:100px;
        border:1px solid black;
    }
    .hidden a{
        display: none;
    }
    .hidden:hover a{
        display:block;
    }

But, it is not very 'accessible'

EDITED after doing a test.

Upvotes: 1

Lasse Espeholt
Lasse Espeholt

Reputation: 17782

CSS visibility did not work, but this does:

a
{
    text-decoration: none;
    color: transparent;
}

a:hover
{
    color: black;
}

Upvotes: 7

Related Questions