Question

我有一个简单的悬停效果，可以改变文字和背景。我想知道的是，是否有可能减慢淡入淡出效果...我相信你可以使用过渡css但我对如何使用它几乎一无所知。

（代码不是完整代码，不能正常工作（但应该足够））

这是HTML：

<div id="ourproductsleft" class="grid_3 alpha">
       <h4>Mail</h4>
       <img class="replies" src="img/index/body/ourproducts/mail_accept.png"/>
       <p class="comment">Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.</p>
       <br>
       <br>
       <p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p>         
       </div> <!--end of ourproductsleft class 3-->

这是CSS

/*Backgrounds for each div*/
#ourproductsleft {
background: #F2F7FA;
/*background-image:url(../img/index/body/ourproducts/grey.png);
background-repeat:repeat;*/
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;   
}

/*Hover bacgrounds for each div*/
#ourproductsleft:hover {
background-  image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
}


/*Do not display original (mail, domain etc) text on hover view*/
#ourproductsleft:hover .replies { 
display: none;

}

/*Keep display inline for maintext (longtext) on hover */
#ourproductsleft:hover .comment { 
display: inline;
opacity: 1; 
}

我还制作了DEMO

Answer 1

JSfiddle Demo

基本上，您必须使用不透明度而不是display:none而不是<div id="ourproductsleft" class="grid_3 alpha"> <h4>Mail</h4> <img class="replies" src="img/index/body/ourproducts/mail_accept.png"/> <p class="comment">Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.</p> <p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p> </div> ，因为后者不是可转换的＆＃39;。还有其他选择取决于您的效果，但这是基础。

<强> HTML

/*Backgrounds for each div*/
#ourproductsleft {
    background: #F2F7FA;
    border-radius: 0px;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}


#ourproductsleft .comment,
#ourproductsleft .replies { 
    opacity: 0; 
    transition: opacity 1s ease;
}

#ourproductsleft:hover .comment,
#ourproductsleft:hover .replies{ 
    opacity: 1; 
}

<强> CSS

{{1}}

Answer 2

HIII，你可以添加

transition-property: width, border-radius, background-color;
transition-duration: 1s, 2s, 5s;
transition-timing-function:  ease, ease-out, linear;

在你的CSS中

Answer 3

在您使用:hover效果的任何元素中使用此过渡属性。

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

例如：

-webkit-transition:2s color;
-moz-transition:2s color;
transition:2s color;

可以用逗号区分多个属性

transition: 1s background 0.5 ease-in, 2s color 1s ease-out;

CSS平滑淡出和淡出过渡（包括文本）

3 个答案: