jquery - CSS 悬停结果

Question

webPage

问题#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; 
}

如果还有什么需要请问我，我会提供所需的信息。

Answer 1

1) 是的，使用 css3 转换 (http://css3.bradshawenterprises.com/transitions/) 和不透明度属性

.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;
}