2

私は次の構造を持っています：

<div class="service lorange">
    <div class="img"></div>
    <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
</div>

そして、次の CSS:

.service .img {
    transition: opacity 300ms;
}
.service:hover .img {
    opacity:0
}

.service丸みを帯びた境界線 (35px) とoverflow: hidden;. これにより、内側.titleの境界線が親の境界線で切り取られます (これは予期される動作です)。

ただし、ホバリング時のトランジション中、およびトランジションの途中のみ（開始して終了する前後ではなく、開始して終了するまで）、何らかの理由で.title境界線が途切れません。

何が起こっているのか分かりますか？fiddleを作成してみましたが、問題は再現しません。これを引き起こしている可能性のあるプロパティは何ですか？

編集：シェルのフィドルは問題を再現しませんが、ページと同じようにシェルだけを見てください（フィドルが使用するiframeのソースを取得しました）

4

2 に答える 2

4

私の解決策：（しかし、私はより良いものを探しています。）

#services-grid .service .title {
   position: relative;
   z-index: 10;
   top: 130px;
   font-size: 13pt;
   text-align: center;
   height: 54px; /* IE fix */

   /* Add radius to bottom of .title */
   border-bottom-left-radius: 8px 15px;
   border-bottom-right-radius: 8px 15px;
}

JSFiddle : http://jsfiddle.net/KC4TH/4/

于 2013-07-25T13:53:49.940 に答える