使用$(this）添加不同<p>'s在一组图像的顶部

Way to use $(this) to add different <p>'s on top of a set of images?

本文关键字：图像 顶部 一组 gt 添加 lt 使用 this      更新时间：2023-09-26

好吧，标题可能令人困惑，但这是我想要的，假设我有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、quadrup.jpg、sixth.jpg、10th.jpg），我希望单词表达不同的内容，只是框应该是相同的。你知道我该怎么做吗？

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

Ex

<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

尝试显示&定位隐藏的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);
}
相关文章：