Question

当您将鼠标悬停在图片上时，我需要此翻转来显示文字。我查了几个不同的教程，但是我找不到很多关于用jQuery添加文本/标题的内容。很多人使用CSS3，但没有使用jQuery。我尝试了以下内容：

的jQuery

//We are using $(window).load here because we want to wait until the images are loaded
$(window).load(function(){
    //for each description div...
    $('div.description').each(function(){
        //...set the opacity to 0...
        $(this).css('opacity', 0);
        //..set width same as the image...
        $(this).css('width', $(this).siblings('img').width());
        //...get the parent (the wrapper) and set it's width same as the image width... '
        $(this).parent().css('width', $(this).siblings('img').width());
        //...set the display to block
        $(this).css('display', 'block');
    });

    $('div.wrapper').hover(function(){
        //when mouse hover over the wrapper div
        //get its children elements with class description '
        //and show it using fadeTo
        $(this).children('.description').stop().fadeTo(500, 0.7);
    },function(){
        //when mouse out of the wrapper div
        //use fadeTo to hide the div
        $(this).children('.description').stop().fadeTo(500, 0);
    });

});

...使用以下HTML ...

HTML

<table id="intro"> 
    <tr>
        <div class="wrapper">
            <td>
                <a href="headwear.html"><img src="images/headwear.png" alt="headwear" /></a>
                <div class="description">
                    <div class="description_content">
                        This is just a test.
                    </div>
                </div>
                <a href="apparel.html"><img src="images/apparel.png" alt="apparel" /></a>
                <a href="accessories.html"><img src="images/accessories.png" alt="accessories" /></a>
            </td>
        </div>
    </tr>
</table>

......这些是风格......

CSS

div.description{
    position: absolute; /* absolute position (so we can position it where we want)*/
    bottom: 0px; /* position will be on bottom */
    left: 0px;
    display: none; /* hide it */
    /* styling below */
    background-color: black;
    font-size: 15px;
    color: white;
}
div.description_content{
    padding: 10px;
}

div.wrapper{
    position: relative; /* important(so we can absolutely position the description div */
}
#intro {
    text-align: left;
    margin-right: 5px;
    width: 1100px;
}
#intro img {
    margin: 5px;
}

小提琴

http://fiddle.jshell.net/yutikohercell/brxu8w8m/

活

http://jsfiddle.net/yutikohercell/brxu8w8m/embedded/result/

Answer 1

试试这个。同时从display:none的css中删除div.description并添加opacity : 0。 FadeTo仅更改不透明度，不会将显示更改为block。

$('img').hover(function() {
     $(this).closest('a').siblings('.description').fadeTo(500, 0.7); // finds the parent 'a' of the clicked element and then finds its sibling with the class 'description'.
  }, function() {
     $(this).closest('a').siblings('.description').fadeTo(500, 0);
  });

http://fiddle.jshell.net/brxu8w8m/1/

JQuery图像文本/标题翻转

1 个答案: