Question

我是网页设计的初学者。我如何使段落仅在光标位于M IRFAN HAIDER（标题）上时可见。我做了一个标题，其中包含一个名称“ M Irfan Haider”和一个段落，其内容位于<p>标签之间。

<html>
<head>
</head>
<body>
    <div class="section "id="p1"" >
	<span class="name">M Irfan Haider</span>
	<span class="border"></span>
	<p>
        McDonald’s leadership draws from a proud history and set of values that made the company an icon of American business. Meet our President and CEO, as well as other McDonald’s executive team members who continue to build our legacy, and ensure our Golden Arches shine bright.
	</p>
    </div>
</body>
</html>

Answer 1

您可以仅使用CSS进行此操作。不需要JavaScript。

在您的确切示例中，实现此目的的最佳方法是添加适当的ID标签，然后当其中一个处于悬停状态时，您可以更改另一个带有ID标签的元素的显示。

#name:hover ~ #p-text-1 {
  display: block;
}

.p-text {
  display: none;
}

<html>

<head>
</head>

<body>
  <div class="section" id="p1">
    <span class="name" id="name">M Irfan Haider</span>
    <span class="border"></span>
    <p class="p-text" id="p-text-1">
      McDonald’s leadership draws from a proud history and set of values that made the company an icon of American business. Meet our President and CEO, as well as other McDonald’s executive team members who continue to build our legacy, and ensure our Golden
      Arches shine bright.
    </p>
  </div>
</body>

</html>

光标在标题上时如何仅显示段落

1 个答案: