質問 #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;
}
まだ何かが必要な場合は、私に尋ねてください。必要な情報を提供します。