Question

当您将鼠标悬停在图片上时，我正试图让文字在上显示。我尝试了几种不同的方法，但似乎没有一种方法可行，或者工作可靠。我用jQuery用HTML编写代码，请告诉我该怎么做！：d

＆＃13;
＆＃13;
$(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>"); }); });
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

尝试一下： JSFiddle

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

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

Answer 2

我不知道你为什么要用jQuery做这个，你应该用CSS做。

我会给你一个基本的例子。 HTML：

<div class="wrapper">
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"/>
<div class="text">Here is the text</div>

CSS：

img {
    width: 300px;
}

.wrapper {
    position: relative;
}

.text {
    position: absolute;   
    bottom: 0;
    left: 0;
    display: none;
}

.wrapper:hover .text {
    display: block;
}

Jsfiddle：http://jsfiddle.net/c32jud6j/

Answer 3

HTML：

<div class="imgWrap">
    <img src="http://www.corelangs.com/css/box/img/caption4.jpg" alt="polaroid" />
    <p class="imgDescription">This image looks super neat.</p>
</div>

CSS：

.imgWrap {
    position: relative;
 }

.imgDescription {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    visibility: hidden;
    opacity: 0;
}

.imgWrap:hover .imgDescription {
    visibility: visible;
    opacity: 1;
}

在JSFiddle

上试用

图像jQuery上的文本

3 个答案: