0

我遵循了有关如何使用 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;
}

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

4

3 回答 3

1

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

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

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

我希望你理解这个概念。

于 2013-09-15T13:40:58.343 回答
0

尝试这个：

$('.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>

于 2013-09-15T13:39:54.757 回答
0

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

于 2013-09-15T13:56:10.527 回答