Verwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen-CSS-Tutorial-php.cn

Verwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen

WBOY

Freigeben： 2023-09-08 21:41:06

nach vorne

884 Leute haben es durchsucht

使用 CSS 将箭头指向工具提示底部

Verwenden Sie die top CSS-Eigenschaft, um unten im Tooltip einen Pfeil hinzuzufügen.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um einen Tooltip mit einem unteren Pfeil hinzuzufügen:

Live-Demo

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         bottom: 100%;
         left: 60%;
         margin-left: -90px;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-top: 50px;
      }
      .mytooltip .mytext:after {
         content: "";
         position: absolute;
         top: 100%;
         left: 50%;
         margin-left: -10px;
         border-width: 7px;
         border-style: solid;
         border-color: blue transparent transparent transparent;
      }
      .mytooltip:hover .mytext {
         visibility: visible;
      }
   </style>

   <body>
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
      </div>
   </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!