悬停时显示提示消息

showing a hint message upon hovering

本文关键字：消息 提示 显示 悬停      更新时间：2023-09-26

我遵循了如何使用jQuery插件和HTML制作照片库的教程，我正在尝试对其进行一些修改。通常，当我单击图像时，它会缩小，但我想添加一个提示，以便当我单击图像时，它会显示特定的提示消息。例如，如果我单击图像，它会显示一个提示：这是消息编号 1。

下面是我的代码：

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Pure CSS3 photo gallery | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <div class="gallery">
                <a tabindex="1"><img src="images/1.jpg"> </a>
                <a tabindex="1"><img src="images/2.jpg"></a>
        <span class="close"></span>
            </div>
        </div>
    </body>
    </html>

但我想添加这样的东西：

<a tabindex="1"><img src="images/1.jpg"> <p class="hint">image 43 </p></a>

在 CSS 中，我添加了这样的东西

.gallery:hover .hint{
    margin:-30px 0 0 450px;
}

我不是很好，但我很想学习这个。提前谢谢。

jquery工具提示对您很有用。实际上，工具提示是什么，用于显示某些元素上的一些文本以提供有关该元素的信息。

       <input id="j" title="please enter the details." />

如果你这样写，它会显示标题属性中存在的信息。Jquery有助于提供更好的外观。这是小提琴看看它小提琴

我希望你理解这个概念。

这只是

一个例子，但这是你想做的吗？ http://jsfiddle.net/7RZHJ/如果您可以script.js显示代码，那么我们可以看到您需要编辑的内容

试试这个：

$('.hint').each(function(){
    $(this).hover(function(){
        // in this function show your hint/tooltip
    },
    function(){
        // and hide it here
    });
});

演示：

$('.hint').each(function() {
  $(this).hover(function() {
      // in this function show your hint/tooltip
      $('<div></div>')
        .addClass('tooltip')
        .text('this is ' + $(this).text())
        .appendTo('body')
        .css({
          top: $(this).offset().top,
          left: $(this).offset().left + 50
        });
    },
    function() {
      // and hide it here
      $('.tooltip').remove();
    });
});
div.hint {
  background: yellow;
  padding: 2px;
  display: inline-block;
  margin: 10px;
}
div.tooltip {
  position: absolute
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='hint'>foo</div>
<br/>
<div class='hint'>bar</div>
<br/>
<div class='hint'>cat</div>

相关文章：