Question

以下是代码。我不确定，请检查一下。如何使用ID连接两个标签？是这样的吗？

<!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>

Answer 1

如果这两个元素是兄弟姐妹，你可以。（使用当前标记，您需要使用JS）

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

和

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

演示：http://jsfiddle.net/pa22m/

<小时/> 如果您想要淡入淡出过渡：

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

演示：http://jsfiddle.net/XD6Xu/

Answer 2

要使用CSS，您需要更改标记的结构：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;
}

Answer 3

如果您想要相同的jQuery结构

，可以使用HTML

DEMO

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

Answer 4

为什么不使用像这样的javascript脚本

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

所以当你鼠标悬停在第一段时，会出现第二段;）

如何通过悬停在链接上使隐藏的段可见？

4 个答案:

DEMO