如何做到这一点，以便在悬停时变得可见

Question

当我将鼠标悬停在它上面时，我只是想让一个段落变得可见。在HTML中我只是在正文中有一个段落，我也在身体的div中尝试过它。我的CSS中的代码只是

p{
    position:absolute;
    visibility:hidden;
}

p:hover p{
    visibility:visible;
}

Answer 1

首先，您不能将<p>个元素放在另一个<p>中，这可能是问题所在。您可以使用<div>或任何these作为容器。

<div><p>paragraph</p></div>

div p {}
div:hover p {}

Answer 2

您可以使用css中的opacity元素轻松完成此操作。请注意，有不透明度和过渡的供应商特定用途。

＆＃13;

＆＃13;

   .hover-vis {
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out
    }

.hover-vis:hover {
    opacity: 1
    }

＆＃13;

<p class="hover-vis">I show up when hovered on</p>
<p>I'm normal</p>

＆＃13;

＆＃13;

＆＃13;