0

好的，标题可能令人困惑，但这是我正在寻找的内容，比如我有 4 张图片。

<img src="images/first.jpg" title="something" class="group">
<img src="images/fourth.jpg" title="something2" class="group">
<img src="images/sixth.jpg" title="something3" class="group">
<img src="images/tenth.jpg" title="something4" class="group">

现在，当我将鼠标悬停在这些图像中的每一个上时，我希望一个带有单词的框出现在悬停图像的顶部，但是，这取决于图像是什么（first.jpg，fourth.jpg，sixth.jpg，tenth .jpg) 我想让单词说不同的东西，只是盒子应该是一样的。关于我将如何做这件事的任何想法？

4

2 回答 2

0

尝试显示和定位隐藏的 DIV。

<img src="images/first.jpg" class="myImage" title="something" class="group">
<img src="images/second.jpg" class="myImage" title="something" class="group">
<!-- more images.. -->
<div id='imageInfo' style='display:hidden; position:absolute;'>
  Populate some details here..
  <div id='imageInfo_title'></div>
<div>

$('.myImage').hover(
    function(){ showImageInfo( $(this));},
    ('#imageInfo').hide();
);
function showImageInfo (fromImg) {
    var infoDiv = ('#imageInfo');
    infoDiv.show();
    infoDiv.position( {
        my: "left top",
        at: "left top",
        offset: "0 0",    
        of: fromImg,
        collision: "flip"
    });

    // now get some details from the <IMG>, and populate the Info Div with them.
    //    -- something like this..
    var title = fromImg.attr( 'title');
    ('#imageInfo_title').text( title);
}
于 2013-07-16T03:22:10.430 回答
0

包含 jQuery 的最简单方法是从 CDN（如 Google CDN）中使用它

前任

<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>

    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
      jQuery(function($){
        $( document ).tooltip({
          track: true
        });
      });
    </script>
  </head>

  <body>
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="one" />
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="two" />
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="Three" />
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="Fout" />
  </body>

</html>

演示：Plunker

于 2013-07-16T03:30:10.087 回答