Question

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

CSS悬停结果

1 个答案: