将文本放在图像问题上

时间:2014-03-27 23:56:33

标签: jquery css

我遇到以下问题,我希望在图片褪色时在图片中插入此文本。问题是文本位置只更改一次,并且不会影响选择器中的其他项目。你能告诉我出了什么问题吗? 我遍历所有项目并为他们注册hover和mouseout事件,但结果不是我期望的结果。

var informationText = $("#informationText");
        informationText.text("More info");
        informationText.hide();
        var element = $(".crop");
        element.children('img').each(function () {
            $(this).hover(function () {
                $(this).fadeTo(400, 0.1);
                var position = $(this).position();
                informationText.css({
                    position: "absolute",
                    top: position.top,
                    left : position.left
                });
                informationText.show();
            });
            $(this).mouseout(function () {
                $(this).fadeTo(400, 1);
                informationText.hide();
            });
        });

                 <---------- HTML section --------------->
            <a href="@member.url">
                <div class="col-lg-3 col-sm-6" style="width: @memberWidth">
                    <div class="crop">
                        <img src="@imgUrl" class="img-responsive img-circle fancy" alt="">
                    </div>
                </div>
                <h5 id="informationText"></h5>
            </a>

0 个答案:

没有答案