我遇到以下问题,我希望在图片褪色时在图片中插入此文本。问题是文本位置只更改一次,并且不会影响选择器中的其他项目。你能告诉我出了什么问题吗? 我遍历所有项目并为他们注册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>