如何在悬停在超链接或者 <a> 标签上时显示隐藏的元素-之路教程

←如何添加和使用 CSS 注释

如何以及何时在 CSS 中使用 !important 规则→

如何在悬停在超链接或者 <a> 标签上时显示隐藏的元素

我们可以在使用 CSS 悬停时使 HTML 隐藏元素可见。

通过本教程，我们可以学习如何显示隐藏元素。
通过使用相邻的兄弟选择器，我们可以应用 CSS 来显示悬停在 <a> 标签上的任何 HTML 元素。

相邻同级选择器用于选择与指定选择器标签相邻或者旁边的元素。
此组合器仅选择与指定标签相邻的一个标签。

让我们看一个例子并讨论代码的每一部分。

添加 CSS

使用 color 属性为 <h2> 标签选择颜色。
使用 <div> 的 display 属性并设置“none”值。

这意味着该元素根本不会显示。

使用边框属性为 <div> 添加边框并设置边框宽度、边框样式和边框颜色属性的值。
对 <a> 标记使用值为“pointer”的 cursor 属性，这意味着游标将链接指示为指针。
使用相邻的兄弟选择器。我们的例子选择了所有紧跟在 <a> 元素之后的 <div> 元素。
使用显示属性并设置“块”值。
使用 color 属性设置文本的颜色。我们可以从颜色选择器中选择我们想要的任何颜色。
设置 <div> 的字体大小。

h2 {
  color: #4287f5;
}
div {
  display: none;
  border: 5px double #b4b8bf;
}
a {
  cursor: pointer;
}
a:hover+div {
  display: block;
  color: #4287f5;
  font-size: 20px;
}

这是我们代码的结果。

使用 <center> 标记悬停时显示隐藏元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      h2 {
        color: #4287f5;
      }
      div {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        cursor: pointer;
      }
      a:hover + div {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <center>
      <h2>onitroad</h2>

      将鼠标悬停在下面显示的元素上以查看 div 元素。
      <br>
      <br>
      <a href="https://www.onitroad.com/">onitroad</a>
      <div>
        经历过风雨，才懂得阳光的温暖。
      </div>
    </center>
  </body>
</html>

将鼠标悬停在元素上以查看 div 元素。

使用 <main> 标记悬停时显示隐藏元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      main {
        text-align: center;
      }
      h2 {
        color: green;
      }
      div {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        display: block;
        margin-top: 15px;
        cursor: pointer;
      }
      a:hover + div {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <main>
      <h2>onitroad</h2>

        Hover the element displayed below to see the div element. 

      <a href=”https://www.onitroad.com/”>onitroad</a>
      <div>
        经历过风雨，才懂得阳光的温暖。
      </div>
    </main>
  </body>
</html>

在这个例子中，我们使用了 <main> 标签而不是 <center> 元素。

它是 HTML5 规范中的一个新的块级元素。
标签用于定义文档的主要内容。
我们使用带有“center”值的 text-align 属性。
我们可以使用 <strong> 标签代替 <b> 标签。

在 div class="hide" 悬停时显示隐藏元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        text-align: center;
      }
      h2 {
        color: green;
      }
      .hide {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        display: block;
        margin-top: 15px;
        cursor: pointer;
        text-decoration: none;
      }
      a:hover + div {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>onitroad</h2>

        Hover the element displayed below to see the div element. 

      <a href=”https://www.onitroad.com/”>onitroad</a>
      <div class="hide">
        经历过风雨，才懂得阳光的温暖。
      </div>
    </div>
  </body>
</html>

在上面的例子中，我们在另一个 <div> 中使用了一个 <div> 标签，并向它添加了一个“隐藏”类。
结果是一样的。

让我们再看一个例子，我们使用带有“hide”类的 <span> 标签。

它是一个空容器。
<div> 标签对块级元素进行分组，而 <span> 对行内元素进行分组。

在使用 span class="hide" 悬停时显示隐藏元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        text-align: center;
      }
      h2 {
        color: #4287f5;
      }
      .hide {
        display: none;
        border: 5px double #b4b8bf;
      }
      a {
        display: block;
        margin-top: 15px;
        cursor: pointer;
        text-decoration: none;
      }
      a:hover + span {
        display: block;
        color: #4287f5;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>onitroad</h2>

        Hover the element displayed below to see the div element. 

      <a href=”https://www.onitroad.com/”>onitroad</a>
      <span class="hide"> 
        经历过风雨，才懂得阳光的温暖。
      </span>
    </div>
  </body>
</html>

创建 HTML

我们可以将 <center> 标签放在 <body> 部分以将内容与中心对齐（HTML5 不支持 <center> 标签）。

我们也可以使用带有“center”值的 CSS text-align 属性。

放置 <h2> 标签并其中写入一些内容。
放置 <b> 或者 <strong> 标签以粗体突出显示文本的指定部分，使用户更明显。
放置 <br> 标签，它定义了一个换行符。
放置 <a> 标签，用于插入指向其他页面或者文件、同一页面内的位置、电子邮件地址或者任何其他 URL 的超链接。
创建 <div> 标签并其中写入一些内容。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <center>
      <h2>onitroad</h2>

        Hover the element displayed below to see the div element. 

      <br> 
      <br>
      <a href=”https://www.onitroad.com/”>onitroad</a> 
      <div> 
        经历过风雨，才懂得阳光的温暖。
      </div>
    </center>
  </body>
</html>

日期：2020-06-02 22:14:53 来源：oir作者：oir