如何用div保持悬停效果

时间:2014-01-12 11:35:00

标签: jquery css html hover effects

我有一个问题是宽度悬停对图像的影响 当光标在图像链接上时,图像上会出现黄色div //它可以正常工作

当光标离开图像时,黄色div消失了//确定

我想做什么: 单击图像时,它会调用第二页(ok),但是当您返回第一页时,图像已经显示为黄色div (就像它保持悬停效果,这对于每个点击的图像都是如此)

我完全迷失了!

我的代码:

.slick {
    -webkit-transition: all 0.5s ease-out;
    -khtml-transition:  all 0.5s ease-out;
    -moz-transition:    all 0.5s ease-out;
    -o-transition:      all 0.5s ease-out;
    transition:         all 0.5s ease-out;
}
.projet-container { 
    position:relative; 
    display:block; 
    margin:2px; 
}               
.projet-titre { 
    position:absolute; 
    display:block; 
    top:0;  
    height:184px; 
    width:184px; 
    opacity:0; 
    filter:alpha(opacity=0); 
}
.titre { 
    display:block; 
    padding:0px 20px; 
    text-transform:uppercase; 
    margin:30px 0px 0px 0px; 
    font-size:1.2em; 
    line-height:1.3em;
}           
.projet-container a { 
    margin:0; 
    padding:0; 
}
.projet-container a:hover .projet-titre, .projet-container a:focus .projet-titre { 
    opacity:1; 
    filter:alpha(opacity=100); 
    background:#ffff00 url(img/projet-hover.png) no-repeat center center; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
    width:184px; 
}
<div class="projet-container">
    <a href="2.html">
        <img  src="urbanisme.gif">                          
        <div class="projet-titre slick">
            <span class="titre">lorem ipsum</span>
        </div>
    </a>
</div>        
<div class="projet-container">
    <a href="2.html">
        <img  src="1_logement.gif">                           
        <div class="projet-titre slick">
            <span class="titre">lorem ipsum</span>
        </div>
    </a>
</div>

0 个答案:

没有答案