jquery - jCoverflip を使用した製品説明のスタイリング

Question

画像の下のテキストのスタイリングに問題があります。インライン スタイルを試しましたが、何もうまくいかないようです。製品名のフォント サイズを他のテキストよりも大きくする必要があります。アドバイスをいただければ幸いです。

前もって感謝します。

• マイク

http://mikedemar.com/stromasys/jcoverflip/index01.html

Answer 1

http://jsfiddle.net/QmVFR/を参照してください

追加

#flip>li>.content{display:none;}

#flip>li.selected>.content{
    display:block;
    position:absolute;
    font-size:11px;
    z-index:1;
    text-align:center;
    width:500px;
    padding-left:50%;
    margin-left:-250px;
}

#flip>li.selected>.content>.title{font-size:16px;display:block!important;}

#scrollbar{top:320px;}

HTMLを次のように変更します

<ul id="flip">

<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/1.png" />
    <div class="content">
        <p class="title">CHARON-AXP/DS10</p>
        <p>Up to two (2) virtual CPUs</p>
        <p>Up to 32GB of Alpha memory.</p>
        <p>Run OpenVMS or Tru64 with no changes</p>
        <p>Supports Windows, Linux and VMware</p>
        <p>Pricing starts at $9,500.00 USD</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/2.png" />
    <div class="content">
        <p class="title">CHARON-AXP/GS80</p>
        <p>Up to eight (8) virtual CPUs</p>
        <p>Up to 32GB of Memory</p>
        <p>Run OpenVMS or Tru64 with no changes</p>
        <p>Supports Windows, Linux and VMware</p>
        <p>Pricing starts at $49,000</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/5.png" />
    <div class="content">
        <p class="title">CHARON-AXP/DS20</p>
        <p>Up to two (2) virtual CPUs</p>
        <p>Up to 32GB of Alpha memory.</p>
        <p>Run OpenVMS or Tru64 with no changes</p>
        <p>Supports Windows, Linux and VMware</p>
        <p>Pricing starts at $12,200</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/4.png" />
    <div class="content">
        <p class="title">A title for the image</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/6.png" />
    <div class="content">
        <p class="title">CHARON-VAX/6620</p>
        <p>Up to six (6) virtual CPUs</p>
        <p>Up to 3 GB of Memory</p>
        <p>Run OpenVMS with no changes</p>
        <p>Supports Windows and VMware</p>
        <p>Pricing starts at 65,000</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/7.png" />
    <div class="content">
        <p class="title">A title for the image</p>
    </div>
</li>
</ul>

そして追加

jQuery('#flip>li.selected').removeClass('selected');
el.addClass('selected');

関数の開始時currentCss。

Answer 2

これを試して：

テキスト全体が「#flip .ui-jcoverflip--title」cssを使用しているため、テストを分離できないため、サイズを大きくしたいテストにスパンタグを追加するだけです。

大きなテキストには追加のスパン タグを使用します。例: <span style="font-size:15px"> CHARON-AXP/DS20 </span>

"#flip .ui-jcoverflip--title .myfont" で追加のクラスを使用し、そのスパンに myfont クラス名を付けることができます。これが役立つことを願っています。