Question

我有一个显示图像行的应用程序。当有人将鼠标悬停在图像上时，我想在图像的底部显示标签。然后在鼠标移出时将其删除。

使用JQuery执行此操作的最佳方法是什么？

以下是我认为我可以做的事情：

HMTL：

    <div id="container" class="container" style="margin-left: auto; margin-right: auto; margin-bottom: 250px;">

    @foreach (var item in Model)
    {
        <div class="imgHolder">
            <img src="~/Images/People/@item.Image" id="@item.Id" width="240" height="240" class="myitem" />
            <span style="visibility: hidden"> hello world </span>
        </div>
    }

</div>

脚本：

    <script>
    $(document).ready(function () {
        $("img").click(function (event) {

            var selImg = event.target;

            var mySpan = $(selImg + "span");
            mySpan.innerHtml = "my message";
            mySpan.backgroundColor = "gray";
            mySpan.visibility = "show";

        });
    });
</script>

我目前在脚本中没有显示的是我计划如何定位跨度，我认为我有一个计划。我将得到图像的位置，并根据它调整跨度高度，宽度和位置。

感谢您的帮助！

Answer 1

这样的东西？匆忙，所以没有风格伟大。

$('img').on("mouseover",function(e){
  var thisid=$( this ).attr('id');
  $('label[for='+thisid+']' ).css("display","inline");
});
$('img').on("mouseleave",function(e){
  $('label').css("display","none");
});

label {
   display:none;
   position:relative;
   /* The left/top values may require adjusting based on your needs. */
   left:-90px;
   top:-70px;
   background-color:gray;
   z-index:9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lorempixel/100/100" id="img1" >
<label for="img1">Image 1</label>

Answer 2

使用title代码

的<img>属性

<img src="link" title="Description of the title" />

Answer 3

您可以使用jQuery UI Tooltip。

修改：

<强> HTML：

<div class="row" data-title="row1">
    <img src="http://placehold.it/100x100"/>
    <img src="http://placehold.it/100x100"/>
    <img src="http://placehold.it/100x100"/>
    <img src="http://placehold.it/100x100"/>
</div>
<div class="row" data-title="row2">
    <img src="http://placehold.it/100x100"/>
    <img src="http://placehold.it/100x100"/>
    <img src="http://placehold.it/100x100"/>
    <img src="http://placehold.it/100x100"/>
</div>

<强> JS：

$(function() {
    $(document).tooltip({
        items: '.row',
        content: function() { 
            return $(this).data('title'); 
        }
    });
});

jsfiddle

使用JQuery将标签放在图像上的最佳方法

3 个答案: