Jquery CSS悬停结果

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

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

如果仍然需要什么，请询问我，我将提供所需的信息。

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

---

您可以在jsFiddle.net上生成一个fiddle来处理或发布相关代码吗？指向一个网站可以详细说明你到底需要什么，但在几周/几个月后，如果其他用户有类似的问题，而你的链接失效，那么这个问题就变得毫无意义。如果在Firefox中查看，图片位置将关闭。在Chrome或IE中观看时，悬停图像的位置良好。但在所有浏览器中，图像的一部分都被切掉了。怎么会？