html - 画像ホバーは Google Chrome でのみ正常に動作します

Question

垂直方向の画像スライダーを作成しました。すべての画像はリンクです。画像をホバーすると、不透明度 0.4 の黒い「ガラス板」が画像を覆い、テキストが表示されます。実際には背景は透過pngです

問題は、Google Chrome でしか正しく表示されないことです。

Opera: ガラス板しか見えませんが、その上のテキストは見えません
Firefox: ガラスペインが表示されませんが、最初の 2 つの項目についてのみガラスペイン上にテキストが表示されます。3 番目のテキストは表示されず、画像間の間隔は Google Chrome や Opera で表示されているものとは異なります。
IE: 画像間の間隔は、Google Chrome や Opera が表示しているものとは異なり、ホバーしても何も表示されず、ガラスペインも表示されず、テキストも表示されません。

google chrome で表示されるものは、他のすべてのブラウザで表示する必要があります。

ただし、これは私が使用しているhtmlコードです:

<div id="vertical_slideshowwrapper">
    <div class="vertical_slideshow" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 489px;">
        <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; height: 4564px; top: -1956px;">
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/1.png" border="0">
                    <div class="box"><p>Text 1</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/2.png" border="0">
                    <div class="box"><p>Text 2</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/3.png" border="0">
                    <div class="box"><p>Text 3</p></div>
                </a>
            </li>
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/4.png" border="0">
                    <div class="box"><p>Text 4</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/5.png" border="0">
                    <div class="box"><p>Text 5</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/6.png" border="0">
                    <div class="box"><p>Text 6</p></div>
                </a>
            </li>
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/7.png" border="0">
                    <div class="box"><p>Text 7</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/8.png" border="0">
                    <div class="box"><p>Text 8</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/9.png" border="0">
                    <div class="box"><p>Text 9</p></div>
                </a>
            </li>
        </ul>
    </div>
</div>

そしてCSS：

    body{
        background-color:#000;
    }
    DIV#vertical_slideshowfooter { 
        display:block; 
        padding-top: 10px; 
        font-family: Tahoma,Verdana,sans-serif; 
        font-size: 8px; 
        font-weight: bold; 
    } 
    div#vertical_slideshowwrapper { 
        width: 100%; 
        height: 100%; 
        overflow: hidden; 
        margin: 0px auto;  
    } 
    .vertical_slideshow ul li { 
        list-style:none; 
        margin-bottom:1px; 
        display:block; 
    } 
    .vertical_slideshow li img { 
        margin-right: 5px; 
        margin-top:1px; 
        margin-bottom:1px; 
        width: 160px; 
        height: 162px; 
    } 

    body{
        padding-top:0px;
        padding-left:0px;
        margin-top:0px;
        margin-left:0px;
    }

    .box {
        position: relative;
        left: 0;
        margin-top: -163px;
        width: 160px;
        height: 163px;
        background-image: url(images/bg.png);
        background-position:0 0;
        text-indent:-99999px;
    }

    .box:hover {
        background-position:-160px 0;
        text-indent:0;
    }

    .box p{
        position:absolute;
        font-family: Arial, Helvetica, Sans-Serif;
        bottom: -8px;
        right: 6px;
        font-variant: normal;
        font-weight: bold;
        font-size: 11px;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
    }

    .box a, a:visited, a:hover{
        color:white;
        text-decoration:none;
    }

私は何を間違っていますか？どんな助けでもいただければ幸いです

CSS バリデーターの結果:

http://jigsaw.w3.org/css-validator/validator?uri=alessandroderoma.it%2Ftry%2Fslider&profile=css3&usermedium=all&warning=1&vextwarning=&lang=it

score 2 · Accepted Answer

HTML ページの最上行の下に配置します。

<!DOCTYPE html>

類似の投稿

編集オペラ
に問題があると思います。私はあなたに答えを提案することができます。最初はテキストの色を黒にし、ホバーすると白にしますtext-indent

.box {  
    position: relative;
    left: 0;
    margin-top: -163px;
    width: 160px;
    height: 163px;
    background-image: url(images/bg.png);
    background-position:0 0;
    color:black;        /*added*/
    }   


.box:hover {
    background-position:-160px 0;
    text-indent:0;
    color:white;    /*added*/
}

score 0 · Accepted Answer

新しい開発者が言ったように、私は追加しました

<!DOCTYPE html>

私のHTMLドキュメントの上部にあり、すべてのブラウザでHTML出力が非常に似ているようになり、マウスオーバーCSSもIEで動作するようになりましたが、Operaの問題は解決しませんでした。画像上のテキストはまだ表示されていません。私はたくさんグーグルで調べましたが、Opera はblock要素に対してのみテキストインデントを有効にしていましたが、追加することさえできました

display: inline-block

私の.box要素では問題が解決しなかったため、回避策を見つける必要がありました。

paddingの代わりに使用して解決しましたtext-indent：

.box {
    padding-left: 99999px;
    overflow: hidden;
}

.box:hover {
    padding-left: 0px;
}

うまくいきましたが、解決策ではありませんが、私にとっては良い回避策です。

助けてくれたすべての人に感謝します！

score 0 · Accepted Answer

単なる提案: 他のブラウザーは一部の css タグをサポートしていないので、IE http://www.quirksmode.org/css/condcom.htmlをチェックしてみてください。このリンクhttp://www. quirksmode.org/css/contents.html

score -1 · Accepted Answer

画像の代わりに背景色を使用できます。画像のように背景色の透明度を設定できるためです。スライダーのキャプションを div クラスに入れ、目的の出力用に次のコードを書き留めます。

.your_css_class
{
背景: #FDF7A6; /* 背景色を設定します * /
opacity: 0.5;/* 不透明度を設定します */
}

また、div クラスの幅、高さ、および位置を設定することを忘れないでください。これがうまくいくことを願っています。

html - 画像ホバーは Google Chrome でのみ正常に動作します

4 に答える 4

Related

Reference