时间戳

首页 > 解决方案 > 光标在标题上时如何仅显示段落

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

问题描述

我是网页设计的初学者。如何使段落仅在光标位于 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>

标签： javascripthtmlcss

解决方案

你可以只使用 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>

推荐阅读