如何在用户使用CSS将鼠标悬停在HTML页面上之前隐藏元素？

Question

我想隐藏HTML页面上的链接，并且仅在用户将鼠标悬停在其上时显示该链接。我怎么能用CSS做到这一点？

Answer 1

CSS visibility不起作用，但确实如此：

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

a:hover
{
    color: black;
}

Answer 2

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;
    }

但是，它不是非常“可访问”

进行测试后编辑。

Answer 3

如果你想在链接中使用任意代码，比如图片，最好使用.hidden { opacity: 0; transition: opacity 0.5s ease; } .hidden:hover { opacity: 1; } 属性。

例如：

ROLE_FACTORY

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