0

ウェブページ

質問 #1
「車のメニュー」にカーソルを合わせると、少しフェードアウトして黒くなります。これをjQueryで行いました。

  • CSS(3)で同じ効果を出すことは可能ですか?
  • フェードカラーを変更することは可能ですか (jQuery の有無にかかわらず)?

質問 #2
「車のメニュー」をクリックすると、車の画像のサムネイルといくつかの情報が表示されます。サムネイルにカーソルを合わせると、画像がより大きな形式で表示されます。ただ、最初の左上の画像だけはうまくホバリングしているのですが、残りはすべてカットされており、その位置が非常にずれています。

これは私にとって、解決できないように見える最大の問題です。CSSコードを少し見直しましたが、すべて問題ないようです。私は少し実験してきましたが、成功しませんでした。

HTML コード

 <div class="car1">

                    <h1>Audi A6</h1>
                    <div class="specs">
                        <table>
                            <tr>
                                <td>Merk:</td>
                                <td>Audi </td>
                            </tr>
                            <tr>
                                <td>Model:</td>
                                <td>A6 avant</td>
                            </tr>
                            <tr>
                                <td>Bouwjaar:</td>
                                <td>2009</td>
                            </tr>
                            <tr>
                                <td>Uitvoering:</td>
                                <td>Diesel</td>
                            </tr>
                        </table>

                        <div>

                        </div>
                    </div>
                    <!-- ID patroon van Thumbnaal c(ars) X(hoeveelste wagen nummer) Y(hoeveelste thumbnail nummer)-->
                    <div class="pics">
                         <a class="thumbnail" href="#thumb"> 
                            <img class="thumb" src="Cars/audi/1.jpg" alt="Voorkant Audi A6" /> 
                            <span>
                                <img class="large" src="Cars/audi/1.jpg" alt="Voorkant Audi A6" />
                            </span>
                         </a>

                         <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/2.jpg" alt="Achterkant Audi A6"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/2.jpg" alt="Achterkant Audi A6" />
                        </span>
                        </a>

                         <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/3.jpg" alt="Rijdende Audi A6"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/3.jpg" alt="Voorkant Audi A6" />
                            </span>
                        </a>

                         <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd" />
                            </span>
                        </a>

                        <a class="thumbnail" href="#thumb"> 
                            <img  src="Cars/audi/5.jpg" alt="Zijkant Audi A6"  class="thumb"/> 
                            <span>
                                <img class="large" src="Cars/audi/5.jpg" alt="Zijkant Audi A6" />
                            </span>
                        </a>

                        <!--  <img class="thumbnail" src="Cars/audi/2.jpg" alt="Achterkant Audi A6">
                            <img class="large" src="Cars/audi/2.jpg" alt="Achterkant Audi A6">
                          <img class="thumbnail" src="Cars/audi/3.jpg" alt="Rijdende Audi A6">
                            <img class="large" src="Cars/audi/3.jpg" alt="Rijdende Audi A6">
                          <img class="thumbnail" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd">
                            <img class="large" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd">
                          <img class="thumbnail" src="Cars/audi/5.jpg" alt="Zijkant Audi A6">
                            <img class="large" src="Cars/audi/5.jpg" alt="Zijkant Audi A6">-->

                    </div>

        </div>

CSS コード

.thumbnail{
    /*width:10em;   
    height:7em;
    margin:1%;*/
    z-index:0;
    position:relative;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility:hidden;
overflow:visible;
text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
overflow:visible;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility:visible;
top: 100%;
left:1%; /*position where enlarged image should offset horizontally */
overflow:visible;

}

.large{
    width: 45em;    
}

.thumb{

    width:40%;
}

.thumb:hover{
    border:1px white solid; 
}

まだ何かが必要な場合は、私に尋ねてください。必要な情報を提供します。

4

1 に答える 1

0

1) はい、css3 トランジション (http://css3.bradshawenterprises.com/transitions/) と opacity プロパティを使用します

.car{
   -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.car:hover{
   opacity:0.7;
}
于 2012-08-18T11:31:32.047 に答える