简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
为什么删除链接后工具提示仍然有效？
P粉323050780
P粉323050780 2024-04-05 09:51:08
0
1
1496

只有当我删除链接时，我才能看到带有工具提示的 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粉323050780
P粉323050780

全部回复(1)
P粉511757848
P粉5117578482024-04-06 09:20:52 1 楼

您需要更改 .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
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！