1

我在一个页面上有四个框，当用户将鼠标悬停在它们上面时，框的高度会延伸，并且会显示更多的文本。盒子里有不同数量的文本，盒子需要增加足够的高度来显示所有的文本。我正在使用 jquery animate 来执行此操作，但是当我将框设置为高度为 100% 时，仍然有文本位于框外。

如何使框扩展到文本的整个高度。谢谢

HTML：

<div id="cat">
        <div class="about_box">
            <div>
                <h1>Product <br /> Innovation</h1>
                <p>There are important issues to fix in the world.  True innovation in the product medium is about functional innovation-
                performing new jobs for consumers.  They are the physical proof of the brand, but if designed well, also a core brand message themselves,
                and emotional as well as physical beacon.</p>
            </div>
        </div>

CSS：

#cat{
    float: left;
    height: 500px;
    margin-top: 30px;
    width: 960px;
}

.about_box{
    background-color: #FFFFFF;
    display: inline-block;
    height: 190px;
    margin-right: 20px;
    width: 200px;
    z-index: 100;
    float:left;
    margin-right:25px;
}

.about_box > div {
    background-color: #191919;
    display: inline-block;
    height: 150px;
    padding: 20px;
    width: 160px;
    z-index: 100;  
}

.about_box > div h1{
    color: #FFFFFF;
    font-size: 25px;    
}

.about_box > div p{
    color: #FFFFFF;
    display: none;
    float: left;
    font-size: 18px;
    margin-top: 5px;
    position: relative;
    top: 5px;
    width: 170px;
    height:100%;
}

.about_box:nth-child(1) > div:hover{
    background-color:gold;   
}

.about_box:nth-child(1) >div:hover p{
    color:black;
}

.about_box:nth-child(1) >div:hover h1{
    color:black;    
}

jQuery

    $( document ).ready(function() {
$('.about_box > div').hover(function() {
        $(this).clearQueue().parent().css('z-index', '10000')
        $(this).clearQueue().find("p").css('display', 'block')
        $(this).animate({
            width: 160, height: "100%", margin: 0,
        });
    }, function() {
        $(this).clearQueue().parent().css('z-index', '100')
        $(this).clearQueue().find("p").css('display', 'none')
        $(this).animate({
            width: 160, height: 150, margin: 0,
        }, function() {
            $(this).parent().css('z-index', '0');
        });
    });
      });

和 jsiffdle http://jsfiddle.net/2W2dQ/

4

2 回答 2

1

您可以使用 css 和 jquery 的组合。像.slideToggle()这样你仍然可以支持IE9及以下

http://jsfiddle.net/uxkDC/

于 2013-10-30T21:07:41.067 回答
0

你甚至根本不需要使用 JavaScript 来解决这个问题。使用 CSS transition，您可以用更少的代码和复杂性实现相同的效果：http: //jsfiddle.net/2W2dQ/18/

于 2013-10-30T20:52:37.093 回答