本文主要是介绍HTML鼠标移动到图片上时显示阴影边框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文地址：http://blog.csdn.net/he20101020/article/details/17212395
css:
- #md-large-widget-content hover img {
- box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
- }
- .ct-coll-item a.ct-coll-thumb:hover img{
- box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
- opacity: 0.9;
- }
html:
- <div class="ct-coll-item">
- <a class="ct-coll-thumb" href="###">
- <img src="image/a.jpg"/>
- </a>
- </div>
在网上看到一个左右移动的css效果挺不错的，记录下：
css：
-
- .ct-post-nav{
- clear:both;
- padding-top:30px;
- margin-top:20px;
- border-top: 1px solid whiteSmoke;
- }
- .ct-post-nav a img,
- .ct-post-nav a:hover img{
- margin: 0px 10px 0px 0px;
- width: 50px;
- }
- .ct-post-nav .ct-post-prev a img{
- margin: 0px 10px 0px 0px;
- float: left;
- }
- .ct-post-nav .ct-post-next a img{
- margin: 0px 0px 0px 10px;
- float: right;
- }
- .ct-post-nav div{
- display:block;
- width:245px;
- position:relative;
- font-size:14px;
- color: #999;
- }
- .ct-post-nav div strong{
- color: #BBB;
- text-transform: uppercase;
- font-size: 11px;
- }
- .ct-post-nav div a{
- display:block;
- }
- .ct-post-nav div.ct-post-prev{
- float:left;
- padding-left:40px;
- }
- .ct-post-nav div.ct-post-next{
- float:right;
- text-align:right;
- padding-right:40px;
- }
- .ct-post-nav div a:after{
- position:absolute;
- color:#F4F5F7;
- font-size:56px;
- font-weight: normal;
- margin-top:-11px;
- height:22px;
- line-height:22px;
- top:55%;
- }
- .ct-post-nav .ct-post-prev a:after{
- content: '«';
- left:0px;
- }
- .ct-post-nav .ct-post-next a:after{
- content: '»';
- right:0px;
- }
- .ct-post-nav div:hover a:after{
- color:#54829B;
- }
- .ct-post-nav div:hover a{
- color:#333;
- }
-
html:
-
- <div class="ct-post-nav">
- <div class="ct-post-prev">
- <a></a>
- </div>
- <div class="ct-post-next">
- <a></a>
- </div>
- </div>
-
一个before after在样式中的用法：
-
- .icon-right:before {
- content: "abcdefg";
- }
html：
-
- <p>
- <span class="arrowIcon icon-right">xx</span>
- </p>
这篇关于HTML鼠标移动到图片上时显示阴影边框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
