在本教程中,我们将使用jQuery一个漂亮的半透明图像标题。悬停图像的标题将被触发。我们将使用jQuery函数fadeTo()函数来实现半透明度。它有一个非常好的效果。
HTML代码
-
- <div class='wrapper'>
-
- <img src='wolf.jpg' />
-
- <div class='description'>
-
- <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </div>
-
- </div>
- < - !最终描述的格- >
- </div>
-
CSS代码
- div.wrapper{
- position:relative;
- }
- div.description{
- position:absolute;
- bottombottom:0px;
- left:0px;
- display:none;
-
- background-color:black;
- font-family: 'tahoma';
- font-size:15px;
- color:white;
- }
- div.description_content{
- padding:10px;
- }
jQuery代码
-
- $(window).load(function(){
-
- $('div.description').each(function(){
-
- $(this).css('opacity', 0);
-
- $(this).css('width', $(this).siblings('img').width());
-
- $(this).parent().css('width', $(this).siblings('img').width());
-
- $(this).css('display', 'block');
- });
-
- $('div.wrapper').hover(function(){
-
-
-
- $(this).children('.description').stop().fadeTo(500, 0.7);
- },function(){
-
-
- $(this).children('.description').stop().fadeTo(500, 0);
- });
-
- });
总结
很简单,效果不错,不是吗?如果您有任何问题随时分享它。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。