主页 / 问题 / 1005198
Accepted
Квартиры Петербург
Asked:2020-07-21 22:08:24 +0000 UTC2020-07-21 22:08:24 +0000 UTC

位置：已修复在 Google Chrome 和 Opera 中不起作用

  • 772

我无法在除 FireFox 之外的任何浏览器中放置工具提示。

我正在尝试设置工具提示的样式 - 带有类工具提示的标题：

html 有一个列表，其中包含以下项目：

<li> 
    <a href='https://сайт.ru/страница.html' title='Специальный раздел'
    class='tooltip'> 
    <h3 class='title_block'>Раздел сайта</h3> 
</a> 
</li>

在 CSS 中：

.tooltip:hover:after{
    bottom: 26px;
    color: #fff;
    content: attr(title);
    right: 10%;

   position: fixed;
    padding: 5px 15px;

    z-index: 98;}

我在这里使用 position:fixed 使我的工具提示出现在视口右下角的悬停上。

因此，我的工具提示仅在 F​​irefox 中显示在正确的位置。

在 Chrome 和 Opera 中，工具提示没有定位，而是直接显示在悬停元素的下方。

请帮我修复这个错误。谢谢！

css

1 个回答

  1. Best Answer

    比如像这样...

    a {
  text-decoration: none;
  font-size: 22px;
}

a:hover:after {
  content: attr(data-title);
  position: fixed;
  right: 10px;
  top: 10px;
  padding: 10px 30px;
  background: tomato;
  color: #fff;
  font-size: 16px;
}
    <a href="" data-title="специальный раздед"> специальный раздел</a>

    • 1

相关问题