我怎样才能使它在悬停时变得可见

Question

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

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 元素轻松完成此操作。请注意，不透明度和过渡有特定于供应商的用法。

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

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

我怎样才能使它在悬停时变得可见

How can I make this so it becomes visible when hovered over

html

css

hover

visibility

hidden