0

私の問題は一種のカスタマイズされた問題だと思います。カーソルを合わせると、div にテキスト (段落テキスト) を表示しようとしています。私はスケールプロパティを使用しましたが、テキストを非表示にする方法のロジックを見つけることができず、ホバーすると、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

まったく拡大縮小するかどうかはわかりませんが、コンテナの高さをアニメーション化して、テキストを表示するスライドダウン効果を作成したいだけですか? そうですか？

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 に答える