RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-499687

Алхимик's questions

Martin Hope
Алхимик
Asked: 2022-09-13 03:39:10 +0000 UTC

CSS/HTML - 工具提示内的标记

  • 0

有这样的设计。它现在在项目中并且一切正常,但我想我想更改布局并相应地使工具提示中的图像位于文本的左侧。我已经挣扎了三天了,但没有任何效果。请帮帮我!

function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  };
}

let textAndTooltip = document.getElementsByClassName('textAndTooltip');
let tooltip = document.getElementsByClassName('tooltip');
let tooltipPositionOk = [];

for (let i = 0; i < textAndTooltip.length; i++) {
  tooltipPositionOk[i] = false;

  textAndTooltip[i].addEventListener('mouseover', function() {
    newPositionTooltip(i);
  });
}

function newPositionTooltip(i) {
  if (!tooltipPositionOk[i]) {
    tooltipPositionOk[i] = true;
  } else {
    return;
  }

  tooltip[i].classList.remove('tooltip_left', 'tooltip_right');

  console.log(tooltip[i]);

  if (getCoords(tooltip[i]).left < 0) {
    tooltip[i].classList.add('tooltip_left');
  } else if (getCoords(tooltip[i]).right > document.documentElement.clientWidth) {
    tooltip[i].classList.add('tooltip_right');

  }
}

window.addEventListener('resize', function() {
  for (let i = 0; i < textAndTooltip.length; i++) {
    tooltipPositionOk[i] = false;
  }
});
.textAndTooltip {
  position: relative;
}

.textAndTooltip__tooltip {
  display: none;
}

.textAndTooltip__text {
  cursor: pointer;
  white-space: nowrap;
}

.textAndTooltip__text:hover+.textAndTooltip__tooltip {
  display: block;
  animation: UpToDown .6s ease;
  animation-fill-mode: forwards;
}

.textAndTooltip__tooltip:hover {
  display: block;
  animation: UpToDown .6s ease;
  animation-fill-mode: forwards;
}

@keyframes UpToDown {
  0% {
    opacity: 0;
    top: 0;
  }
  100% {
    opacity: 1;
    top: 1em;
  }
}

.tooltip {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 300px;
  min-width: 200px;
  background-color: #3989c9;
  padding: .5em;
  aling-content: left;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: white;
  z-index: 2;
}

.tooltip_right {
  left: auto;
  right: 0;
  transform: translate(0, 0);
}

.tooltip_left {
  left: 0;
  right: auto;
  transform: translate(0, 0);
}
<!DOCTYPE html>
<html>

<head>
  <title>Online HTML Editor</title>
</head>

<body>
  <p>
    <span class="textAndTooltip">
            <strong class="textAndTooltip__text">
            Point ME!.
        </strong>
        <span class="textAndTooltip__tooltip tooltip">
        <span><a style='align-content:left; text-align:left;'class="tooltip__img" href="https://clck.ru/J36a7" target="_blank">
                <img src="https://inlnk.ru/1PnAYw" alt="babababa" width="100%">
            </a></span>
    <span class="tooltip__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque rem tempora cum impedit commodi. Voluptas accusantium recusandae dolores, officia quasi.</span></span>
    </span>
</body>

</html>

html
  • 0 个回答
  • 0 Views
Martin Hope
Алхимик
Asked: 2022-07-25 08:24:35 +0000 UTC

HTML - 工具提示定位

  • 0

关于 HTML/CSS 的最菜鸟问题又是我。

总的来说,有一段代码,存在三个问题:

  1. 当文本位于侧面时,工具提示会从窗口中弹出。
  2. 我希望工具提示相对于调用它的短语的中心定位
  3. 我还希望一旦鼠标超出导致工具提示的单词,工具提示就会消失。也就是说,在这种情况下,原来道恩强森挡住了莫蒂,这不是很方便。

编码

<!DOCTYPE html>
<html>
<style>
  img * {
    max-height: 100px;
    max-width: 200px;
  }
  
  body * {
    display: inline-block;
  }
  
  .tooltiped {
    position: relative;
  }
  
  .tooltiped .tooltip {
    position: absolute;
    max-width: 300px;
    min-width: 200px;
    z-index: 1;
    left: 0px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transition: ease 0.11s;
  }
  
  .tooltiped:hover .tooltip {
    padding-top: 15px;
    visibility: visible;
    opacity: 1;
  }
  
  .tooltiped .tooltip .tooltip-content {
    max-width: 300px;
    min-width: 200px;
    padding: 0.5em;
    z-index: 10;
    display: block;
    background-color: #3989c9;
    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>Тестовый текст. Допустим у нас есть
    <span>
    <div class="tooltiped">
        Квентин Тарантино Тарантинович
    
        
        <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" max-height="300" width="100%"></a> Кве́нтин Джеро́м Таранти́но — американский кинорежиссёр, сценарист, актёр, кинопродюсер, кинооператор. Один из наиболее ярких представителей постмодернизма в кинематографе.

            </div>
        </div>
    </div>
    </span> и мы хотим снять с ним кино в духе
    <span>
    <div class="tooltiped">
        Рика и Морти
        <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"  max-height="300"  width="100%"></a> «Рик и Морти» — американский комедийный научно-фантастический анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном и выпускаемый в рамках блока Adult Swim на телеканале Cartoon Network.
            </div>
        </div>
    </div>
    </span>
    </br>Таким образом мы должны взять на главную роль
    <span>
    <div class="tooltiped">
        Кристиана Бейла
        <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"  max-height="300"  width="100%"></a> Кри́стиан Чарльз Фи́лип Бейл — английский актёр. Лауреат премии «Оскар», двух премий «Золотой глобус» и двух наград Американской Гильдии киноактёров. В 2011 году журнал Time включил Бейла в список 100 самых влиятельных людей мира. Бейл родился в Уэльсе в семье англичан.
            </div>
        </div>
    </div>
    </span> на роль
    <span><div class="tooltiped">
        Рика Санчеза
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://rickandmorty.fandom.com/ru/wiki/%D0%A0%D0%B8%D0%BA_%D0%A1%D0%B0%D0%BD%D1%87%D0%B5%D0%B7"><img src="https://static.wikia.nocookie.net/rickandmorty/images/8/81/%D0%A0%D0%B8%D0%BA_%D0%A1%D0%B0%D0%BD%D1%87%D0%B5%D0%B7_001.jpg/revision/latest/scale-to-width-down/270?cb=20200222114630&path-prefix=ru" alt="babababa"  height="200px"  width="100%"></a></br> Рик Санчес (англ. Rick Sanchez) — один из двух главных героев американского мультсериала «Рик и Морти», созданного Джастином Ройландом и Дэном Хармоном. Рик — гениальный учёный, алкоголик, реалист, атеист и мизантроп; для него характерны цинизм и пренебрежение общепринятыми нормами поведения.
            </div>
        </div>
    </div>
    </span> и
    <span><div class="tooltiped">
        Дуэйна Джонсона
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B6%D0%BE%D0%BD%D1%81%D0%BE%D0%BD,_%D0%94%D1%83%D1%8D%D0%B9%D0%BD"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Dwayne_Johnson_2014%28Cropped%29.jpg/274px-Dwayne_Johnson_2014%28Cropped%29.jpg" alt="babababa" max-height="300" width="100%"></a> Дуэ́йн Ду́глас Джо́нсон (англ. Dwayne Douglas Johnson; род. 2 мая 1972 года, Хейвард, США) — американский киноактёр, предприниматель, музыкант, певец[1], в прошлом — рестлер[2]. Известен под псевдонимом Скала́ (англ. The Rock).
            </div>
        </div>
    </div></span> на роль
    <span><div class="tooltiped">
        Морти
        <div class="tooltip">
            <div class="tooltip-content">

                <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D1%80%D1%82%D0%B8_%D0%A1%D0%BC%D0%B8%D1%82"><img src="https://upload.wikimedia.org/wikipedia/ru/thumb/c/c3/Morty_Smith.png/129px-Morty_Smith.png" alt="babababa" height="200px" width="100%"></a></br> Мортимер «Морти» Смит (англ. Mortimer «Morty» Smith) — один из главных героев американского комедийного мультсериала «Рик и Морти», внук Рика Санчеса, неуверенный в себе и параноидальный 14-летний подросток, ученик средней школы, образ которого основан на образе Марти Макфлая из научно-фантастической трилогии «Назад в будущее»
            </div>
        </div>
    </div></span>
    </br>
    ???
    </br>
    PROFIT
    </br>
  </p>

</body>

</html>

html css
  • 1 个回答
  • 39 Views
Martin Hope
Алхимик
Asked: 2022-08-24 09:24:29 +0000 UTC

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

  • 0

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

  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 个回答
  • 59 Views
Martin Hope
Алхимик
Asked: 2022-07-20 18:00:20 +0000 UTC

HTML - 图片工具提示

  • 0

大家好。我正在寻找一种方法,以便当您将鼠标悬停在一个单词上时,会出现一个带有小文本和图片的工具提示,并且当您单击时,会转换到维基百科上的页面。

我马上说我是第一次使用 HTML,我什么都不懂,所以如果这对你来说很明显,请抑制你的轻蔑并分享你的智慧)

在尝试在 Internet 上找到此代码时:

[data-tooltip] {
  position: relative; /* Относительное позиционирование */ 
}
[data-tooltip]::after {
  content: attr(data-tooltip); /* Выводим текст */
  position: absolute; /* Абсолютное позиционирование */
  width: 300px; /* Ширина подсказки */
  left: 0; top: 0; /* Положение подсказки */
  background: #3989c9; /* Синий цвет фона */
  color: #fff; /* Цвет текста */
  padding: 0.5em; /* Поля вокруг текста */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
  pointer-events: none; /* Подсказка */
  opacity: 0; /* Подсказка невидима */
  transition: 1s; /* Время появления подсказки */
} 
[data-tooltip]:hover::after {
  opacity: 1; /* Показываем подсказку */
  top: 2em; /* Положение подсказки */
}
<p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">
  Наведи сюда курсор.</p>

如您所知,插入数据工具提示中图像的链接没有帮助)

html вёрстка
  • 1 个回答
  • 51 Views
Martin Hope
Алхимик
Asked: 2022-07-11 07:15:50 +0000 UTC

Python - 通过元素数量限制生成器的输出

  • 0

这个问题纯粹是技术性的。默认情况下,[x for x in list if f()] 生成器将返回列表集中与 f() 条件匹配的所有元素。我需要按数量限制此输出,例如,输出元素不会超过 10 个。

问题是,据我了解,如果在 f() 中填写了一些有趣的公式,那么生成器将执行多次此操作,列表大小为 10,000,将执行 10,000 次操作,而对我来说他们完全不需要。

到目前为止,我只想到编写一个单独的函数来处理一个集合,但这是为每个生成器获得的(我有很多)——你必须编写自己的函数。

一般来说,问题再次是如何限制发电机的输出量。也许你可以以某种方式固定柜台?

python генераторы
  • 1 个回答
  • 20 Views
Martin Hope
Алхимик
Asked: 2022-08-10 07:06:47 +0000 UTC

为 BeautifulSoup 搜索结果分配语言 [关闭]

  • -1
关闭 这个问题是题外话。目前不接受回复。

该问题是由不再复制的问题或错字引起的。虽然类似问题可能与本网站相关,但该问题的解决方案不太可能帮助未来的访问者。通常可以通过在发布问题之前编写和研究一个最小程序来重现问题来避免此类问题。

3 个月前关闭。

改进问题

不会有代码,因为我什至不知道在哪里挖,而且网上也没有任何建议。我在国外,通过代码中的调用搜索结果引入了本地本地化,我根本不需要。从理论上讲,您需要设置语言或本地化参数,但我不知道该怎么做。告诉我一个)

页面检索代码:

USER_AGENT = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0"
headers = {"user-agent" : USER_AGENT}
zapros = 'Тест'
url = 'google.ru/search?q=определение+слова+{0}'.format(zapros) # url страницы 
r = requests.get(url,headers=headers)
python парсер
  • 1 个回答
  • 27 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5