您的位置：首页 > 其它

鼠标移动到图片上显示阴影和图片上的文字

2013-05-04 21:33 751 查看

<style type="text/css">
	.bg_a {
		position:absolute;
		 width:156px; height:112px; 
		background:#fff; 
	}
	
        
		
		 .ptitle { width:156px; position:absolute; z-index:9; left:0px; bottom:0px; height:24px; line-height:25px; margin:0 auto; text-align:center; color:#fff; }
		
	.pic {
		
			width: 156px;
			height: 112px;
			top : 16px;
	}
	
	.digest { 
		width:156px; position:absolute; z-index:9; left:0px;
		top:-16px;
		height:112px;
		display:none; color:#fff;
	}
	
	.dig_bg {
			width: 156px;
			height: 112px;
			position: absolute;
			z-index:8;
			left:0px;
			top : -16px;
			background-color: #000;
			opacity: 0.4;
			filter:alpha(Opacity=80);
			-moz-opacity:0.5;
			display: none;
		}
		
		a { text-decoration:none; cursor:pointer; }
        
        .digest { display:none; }
        
		
  
	
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function run() {
	tall.style.display = "block";
	pt.style.display = "none";
	dig_bg.style.display = "block";
}

function out() {
	tall.style.display = "none";
	pt.style.display = "block";
	dig_bg.style.display = "none";
}
</script>
<div>
<div class="bg_a" onmouseover="run()" onmouseout="out()">
	<img class="pic" src="http://img1.cache.netease.com/cnews/2013/5/2/2013050211063877d04.jpg" />
	<p id="dig_bg" class="dig_bg"></p>
	<p id="tall" class="digest">近日，龚玥菲露巨乳的造型瞬间赢得上海车展众宅男芳心，吴莫愁也前来助阵，一席白色蕾丝曼妙多姿。</p>
	<p class="title_bg"></p>
	<p id="pt" class="ptitle">吴莫愁齐P透视现车展</p>
</div>

阴影位置的定位，还不完善。但经过我不完善的调整效果是有了。

鼠标移动到图片上显示阴影和图片上的文字

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航