首頁  >  問答  >  主體

為什麼刪除連結後工具提示仍然有效?

只有當我刪除連結時,我才能看到帶有工具提示的 div 標籤。這兩者有何關係? div 內容未與連結一起出現。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  border-radius: 6px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

div#tdemo1 {
  animation-name: animate;
  animation-duration: 3s;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes animate {
  0% {
    background-color: red;
  }
  33% {
    background-color: yellow;
  }
  66% {
    background-color: blue;
  }
  99% {
    background-color: white;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<body style="background-image:linear-gradient(180deg,blue,violet);">

  <div id="tdemo1" class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <div id="bdemo1" class="container">
    <h1>types of buttons in bootstrap:</h1>

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-light text-dark">Light</button>

  </div>

我嘗試使用帶有 div 標籤的工具提示並使用 bootstrap 顯示按鈕。一次只有其中之一出現正確。

P粉323050780P粉323050780219 天前1500

全部回覆(1)我來回復

  • P粉511757848

    P粉5117578482024-04-06 09:20:52

    您需要更改 .tooltip 元素的類,因為 bootstrap 將其識​​別為 bootstrap 元素並重寫其自己的值它。

    .tooltipp {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .tooltipp .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      border-radius: 6px;
    }
    
    .tooltipp:hover .tooltiptext {
      visibility: visible;
    }
    
    div#tdemo1 {
      animation-name: animate;
      animation-duration: 3s;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
    @keyframes animate {
      0% {
        background-color: red;
      }
      33% {
        background-color: yellow;
      }
      66% {
        background-color: blue;
      }
      99% {
        background-color: white;
      }
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    
    <body style="background-image:linear-gradient(180deg,blue,violet);">
    
      <div id="tdemo1" class="tooltipp">Hover over me
        <span class="tooltiptext">Tooltip text</span>
      </div>
      <div id="bdemo1" class="container">
        <h1>types of buttons in bootstrap:</h1>
    
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-dark">Dark</button>
        <button type="button" class="btn btn-outline-light text-dark">Light</button>
    
      </div>

    回覆
    0
  • 取消回覆