0

我认为我的问题是一种自定义问题，当我将鼠标悬停在 div 上时，我试图在 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;

}
4

2 回答 2

0

变换中的比例使用逗号,而不是点.，您最多可以提供 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 的评论以了解更多相关信息。

于 2013-06-26T12:30:43.660 回答
0

我不太确定您是否要缩放，也许您只是想为容器的高度设置动画以创建显示文本的向下滑动效果？这是你的意思吗？

css 替代品

如果是这样，您可以使用以下 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/

于 2013-06-26T12:57:13.890 回答