gpt4 book ai didi

javascript - 图像上的文字 jQuery

转载 作者:行者123 更新时间:2023-12-03 11:34:50 25 4
gpt4 key购买 nike

当您将鼠标悬停在图像上时,我正在尝试使文本显示在图像上。我尝试了几种不同的方法,但似乎没有一种有效或可靠。我正在使用 jQuery 在 HTML 中编写代码,请告诉我该怎么做! :D

$(document).ready(function() {
$('img').css('height', '150px');
$('img').css('width', '150px');
$('img').css('padding', '10px');
$('img').css('border-radius', '30px');
$('#container').css('width', '1040px');
$('#container').css('margin-left', 'auto');
$('#container').css('margin-right', 'auto');
})

$(document).ready(function() {
$('img').click(function() {
$('#container').append("<p>It worked chaps</p>");
});
});
<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
<div id="gallery">
<div id="container">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg">
<p>It worked</p>
</div>
</div>
</body>

</html>

最佳答案

尝试一下: JSFiddle

$("img").hover( function(){
$(".hover").show().offset($(this).offset());
}, function(){
$(".hover").hide();
});

这将使带有 hover 类的元素在悬停时出现在任何图像上。

关于javascript - 图像上的文字 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26561924/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com