Question

我认为我的问题是一种自定义问题我试图在div中显示文本（段落文本）当我将鼠标悬停在它上面时。我使用了scale属性，但是我无法找到如何隐藏文本的逻辑，并且在悬停时它将垂直缩放，显示div中的其余文本而不会干扰div的其余部分这是我的代码：

    <div class="middle">

     <div class="product1" id="product1" style="float: left;">


         <img src="res/images/product.png" width="300" height="180">

         <h3 class="prd_header">Custom Software</h3>

         <p class="paragraph"><b>Your ultimate destination for the outstanding desktop and web-based business applications</b>FEnD Consultants offers Custom software Development for Web and desktop applications. Our custom software development services help the modern-day enterprise keep pace with the rapidly.

</p>

     </div>
</div>

我放了很少的文字，但我的真实文字很长。

这是我的Css代码：

.middle{
    height:730px;
    width: 100%;
    bord er-bottom:  1px dotted green ;
    margin-top: 50px;


}

#product1{


     opacity: 0.5;
     transition: 0.5s ease-in-out;

}
#product1:hover{



    background: #e0e0e0;

    opacity: 1;
  -webkit-transform: scale(1.1.1.1);
          transform: scale(1.1.1.1);
}
.middle p {

    text-align: left;

}

Answer 1

转换中的比例使用逗号,而非点.，您最多可以提供2个值(x,y)。

以下是您的代码jsfiddle。

以下是一些关于您的评论的示例和解释。

scale(2.2)表示scale(x)

scale(2,2)表示scale(x,y)

scale(2.2, 1.1)表示scale(x, y)

你看到了区别吗？您可以使用小数来精确x和y值，但每个值只能有一个小数点。查看@ xec的评论，了解更多相关信息。

Answer 2

我不太确定你想要缩放，也许你只想动画容器的高度来创建一个显示文本的向下滑动效果？那是你的意思吗？

css alternative

如果是这样你可以使用以下css（假设你知道div的高度应该是什么）

#product1 {
    height: 200px; /* height of div excluding the paragraph */
    overflow: hidden; /* hide anything below */
    transition: 0.5s ease-in-out;
}
#product1:hover {
    height: 320px; /* reveal paragraph by resizing the container */
}

http://jsfiddle.net/A29G4/2/

javascript替代

如果你想要段落（和其他内容）的高度是动态的，你可能最好让jQuery为你做数学计算;

var paragraph = $(".paragraph");
$(".product1").hover(function () {
    paragraph.slideDown();
}, function () {
    paragraph.slideUp();
})

http://jsfiddle.net/A29G4/3/

缩放div以在mouseOver上显示div中的其余文本

2 个答案:

css alternative

javascript替代