0

私は数時間それを機能させようとしてきました.stackoverflowで提供されているいくつかのソリューションを試してみましたが、タグなしでコンテンツを管理することはできません.

これが私のhtmlコードです

<div class="productItem">
                <a class="imageContainer" style="background-image: url('<?php echo base_url() ?>images/product/thumbs/<?php echo $aProduct->filename ?>')">
                  Product Image
                </a>      
                <h4>
                    <a href="<?php echo site_url('home/product/' . $aProduct->product_id) ?>">
                        <?php echo $aProduct->product_name ?>
                    </a>
                </h4>
                <h3 class="productPrice"><?php echo $aProduct->price ?></h3>
                <span class="productItemRating">5</span>
                <a href="<?php echo $aProduct->product_id ?>" class="product-more">Buy</a>
            </div>

問題は最初のタグにあります。タグにはコンテンツがありません。画像タグbczの代わりに背景として画像を提供しています。誰かがそれがより速いと提案しました

imageContainer タグの CSS -

a.imageContainer{    
    display:block; 
    background-image: url('../images/product/thumbs/1358600020ca3.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 5px;
    background-color: white;
    float: left;
    width: 160px;
    text-indent:-9999px; 
    height: 165px;    
}

a.imageContainer:hover{    
    cursor: pointer;
}

他の回答に従って動作するはずです。何かが足りないと思うので、質問するしかありません。

実例-

http://www.safaapps.com/home/category/7

項目 Galaxy Y の画像をクリックすることはできません。

4

1 に答える 1

1

奇妙なことに、ルールを削除するopacityと修正されます...理由は聞かないでください!

.productItem h4 {
    色: 黒;
    フォントファミリー: サンセリフ;
    フォントサイズ: 16px;
    フォント スタイル: 通常;
    マージン: 3px 0;
    不透明度: 0.95;
    テキスト整列: 左;
}

.productItem h3, h4 {
    色: 白;
    フォントファミリー: サンセリフ;
    フォントサイズ: 20px;
    マージン: 0;
    不透明度: 0.95;
    テキスト整列: 右;
    幅: 100%;
}

上記の解決策は機能しますが、意味がありません。ただし、これはもう少し理にかなっています。

floatする必要はありません.imageContainer。これは奇妙な副作用を引き起こしていました: その<h4>隣にあるものは、どういうわけか、その上に引き伸ばされていました (それは、h4が の上にある毛布のようでした.imageContainer)。にカーソルを合わせたとき.imageContainer、実際には にカーソルを合わせていたh4ため、:hoverスタイルがトリガーされませんでした。

opacityそもそもなぜ持っていたのかわかりませんが、そのままにしておくことができます。以下を削除するだけfloatです。

a.imageContainer {
    背景色: 白;
    background-position: センター センター;
    バックグラウンドリピート: リピートなし;
    背景サイズ: 含む;
    表示ブロック;
    フロート: 左;
    高さ: 165px;
    余白: 5px;
    テキストインデント: -9999px;
    幅: 160px;
}
于 2013-02-11T06:57:43.227 に答える