主页 / 问题 / 1432503
Accepted
Алхимик
Asked:2022-08-24 09:24:29 +0000 UTC2022-08-24 09:24:29 +0000 UTC

HTML - 通过工具提示显示的文本

  • 772

大家好！上一个问题中的智者给出了代码，事实证明发生了什么。一般来说，它可以按我的意愿工作，除了几点。

  1. 如何使行距变小？
  2. 出于某种原因，文本通过图像显示。
  3. 我怎样才能使工具提示不会超出窗口？

请不要生气，这是我第一次接触 html 和 css :)

编码：

<!DOCTYPE html>
<html>
<style>
    body * {
        display: inline-block;
    }

    .tooltiped {
        position: relative;
    }

    .tooltiped .tooltip {
        position: absolute;
        max-width: 500px;
        min-width: 200px;

        left: 0px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transition: ease 0.11s;
    }

    .tooltiped:hover .tooltip {
        padding-top: 2em;
        visibility: visible;
        opacity: 1;
    }

    .tooltiped .tooltip .tooltip-content {
        max-width: 300px;
        min-width: 200px;
        z-index: 10;
        display: block;
        background-color: #3989c9 ;
        padding: 0.5em;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        background: #3989c9;
        text-align: center
    }

    .tooltiped .tooltip .tooltip-content,
    .tooltiped .tooltip .tooltip-content a {
        color: #fff;
    }
</style>
<title>Online HTML Editor</title>

<head>
</head>

<body>
    <p>Тестовый текст. Допустим у нас есть</p>
    <div class="tooltiped">
        <p>Квентин Тарантино Тарантинович</p>
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.film.ru/sites/default/files/filefield_paths/qt8-the-first-eight-arriva-trailer-documentario-tarantino-v4-407203-1280x720.jpg" alt="babababa" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

            </div>
        </div>
    </div>
    и мы хотим снять с ним кино в духе
    <div class="tooltiped">
        <p>Рика и Морти</p>
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYELGsc6h5OLMZwb4TB9eqbDi928XIJe9R6A&usqp=CAU" alt="babababa" width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
            </div>
        </div>
    </div>
    <br/>Таким образом мы должны взять на главную роль
    <div class="tooltiped">
        <p>Кристиана Бейла</p>
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.mirf.ru/wp-content/uploads/2016/01/bale-start.jpg" alt="babababa" width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
            </div>
        </div>
    </div>
    </br>
    ???
    </br>
    PROFIT
    </p>
</body>

</html>```
html

2 个回答

  1. 您缺少z-index确定定位元素及其子元素位置的属性。具有较大值的定位元素z-index将与具有较小值的元素重叠。在您的情况下，z-index它没有在任何地方指定，因此文本被叠加在工具提示上。

      .tooltiped .tooltip {
      position: absolute;
      max-width: 500px;
      min-width: 200px;
      z-index: 1; /** будет поверх элемента с z-index: 0 */
      left: 0px;
      top: 0px;
      visibility: hidden;
      opacity: 0;
      transition: ease 0.11s;
  }

    添加此属性后，工具提示不会重叠： 

    body * {
  display: inline-block;
}

.tooltiped {
  position: relative;
}

.tooltiped .tooltip {
  position: absolute;
  max-width: 500px;
  min-width: 200px;
  z-index: 1;
  left: 0px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transition: ease 0.11s;
}

.tooltiped:hover .tooltip {
  padding-top: 2em;
  visibility: visible;
  opacity: 1;
}

.tooltiped .tooltip .tooltip-content {
  max-width: 300px;
  min-width: 200px;
  z-index: 10;
  display: block;
  background-color: #3989c9;
  padding: 0.5em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  background: #3989c9;
  text-align: center
}

.tooltiped .tooltip .tooltip-content,
.tooltiped .tooltip .tooltip-content a {
  color: #fff;
}
    <body>
  <p>Тестовый текст. Допустим у нас есть</p>
  <div class="tooltiped">
    <p>Квентин Тарантино Тарантинович</p>
    <div class="tooltip">
      <div class="tooltip-content">

        <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.film.ru/sites/default/files/filefield_paths/qt8-the-first-eight-arriva-trailer-documentario-tarantino-v4-407203-1280x720.jpg" alt="babababa" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист,
        актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

      </div>
    </div>
  </div>
  и мы хотим снять с ним кино в духе
  <div class="tooltiped">
    <p>Рика и Морти</p>
    <div class="tooltip">
      <div class="tooltip-content">

        <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYELGsc6h5OLMZwb4TB9eqbDi928XIJe9R6A&usqp=CAU" alt="babababa" width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином
        Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
      </div>
    </div>
  </div>
  <br/>Таким образом мы должны взять на главную роль
  <div class="tooltiped">
    <p>Кристиана Бейла</p>
    <div class="tooltip">
      <div class="tooltip-content">

        <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B0%D1%80%D0%B0%D0%BD%D1%82%D0%B8%D0%BD%D0%BE,_%D0%9A%D0%B2%D0%B5%D0%BD%D1%82%D0%B8%D0%BD"><img src="https://www.mirf.ru/wp-content/uploads/2016/01/bale-start.jpg" alt="babababa" width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии
        киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
      </div>
    </div>
  </div>
  </br>
  ???
  </br>
  PROFIT
</body>

    您可以在 MDN 上的主题z-index中阅读有关它的更多信息。

    • 0
  2. Best Answer

    <style></style>和标签<title></title>应该放在标签中<head></head>。

    此外，您的最后一个结束标签</p>没有开始标签<p>，添加或删除结束标签。

    通常，您使用的标签不正确。

    <p></p>应该用于段落，它们应该包含所有文本：

    <p>Тестовый текст. Допустим у нас есть Квентин Тарантино Тарантинович и мы хотим снять с ним кино в духе Рика и Морти. Таким образом мы должны взять на главную роль Кристиана Бейла.</p>

    或者像这样（如果您的文本由多个段落组成）：

    <p>Тестовый текст. Допустим у нас есть Квентин Тарантино Тарантинович и мы хотим снять с ним кино в духе Рика и Морти.</p>
<p>Таким образом мы должны взять на главную роль Кристиана Бейла.</p>

    接下来，我们已经将必要的单词包裹在<span></span>里面和里面，我们排版了我们的提示。

    1. 您有这样的行距是因为您错误地使用了段落标签<p></p>并在其中放置了单独的短语，您不应该这样做。这个标签有一个标准的边距，因为它们你得到了线条之间的距离。当您正确格式化段落时，就不会有这样的问题。以后会使用css中的line-height属性来调整行间距。
    2. 为了防止文字通过图片显示出来，需要在css中使用z-index属性（例如z-index: 2）。默认设置为自动。
    3. 如果没有 JavaScript，我没有找到使工具提示留在屏幕上的解决方案。

    我只是在自学，我的JS还是很烂，我草绘了下面的实现，但我相信一切都可以做得更好： https ://jsfiddle.net/8x2e7rk9/

    • 0

相关问题