HTML鼠标移动到图片上时显示阴影边框

2024-03-13 04:48
文章标签 显示 图片 边框 html 鼠标 frontend 移动 阴影 上时

本文主要是介绍HTML鼠标移动到图片上时显示阴影边框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文地址：http://blog.csdn.net/he20101020/article/details/17212395

css:

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. #md-large-widget-content hover img {  
  2.     box-shadow: 6px 6px 6px rgba(0,0,0,0.3);  
  3. }  
  4. .ct-coll-item a.ct-coll-thumb:hover img{  
  5.     box-shadow: 6px 6px 6px rgba(0,0,0,0.3);  
  6.     opacity: 0.9;  
  7. }  
html:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <div class="ct-coll-item">  
  2. <a class="ct-coll-thumb" href="###">  
  3. <img src="image/a.jpg"/>  
  4. </a>  
  5. </div>  

在网上看到一个左右移动的css效果挺不错的，记录下：

css：

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /**左右移动样式start*/  
  2. .ct-post-nav{  
  3.     clear:both;  
  4.     padding-top:30px;  
  5.     margin-top:20px;  
  6.     border-top: 1px solid whiteSmoke;  
  7. }  
  8. .ct-post-nav a img,  
  9. .ct-post-nav a:hover img{  
  10.     margin: 0px 10px 0px 0px;  
  11.     width: 50px;  
  12. }  
  13. .ct-post-nav .ct-post-prev a img{  
  14.     margin: 0px 10px 0px 0px;  
  15.     float: left;  
  16. }  
  17. .ct-post-nav .ct-post-next a img{  
  18.     margin: 0px 0px 0px 10px;  
  19.     float: right;  
  20. }  
  21. .ct-post-nav div{  
  22.     display:block;  
  23.     width:245px;  
  24.     position:relative;  
  25.     font-size:14px;  
  26.     color: #999;  
  27. }  
  28. .ct-post-nav div strong{  
  29.     color: #BBB;  
  30.     text-transform: uppercase;  
  31.     font-size: 11px;  
  32. }  
  33. .ct-post-nav div a{  
  34.     display:block;  
  35. }  
  36. .ct-post-nav div.ct-post-prev{  
  37.     float:left;  
  38.     padding-left:40px;  
  39. }  
  40. .ct-post-nav div.ct-post-next{  
  41.     float:right;  
  42.     text-align:right;  
  43.     padding-right:40px;  
  44. }  
  45. .ct-post-nav div a:after{  
  46.     position:absolute;  
  47.     color:#F4F5F7;  
  48.     font-size:56px;  
  49.     font-weight: normal;  
  50.     margin-top:-11px;  
  51.     height:22px;  
  52.     line-height:22px;  
  53.     top:55%;  
  54. }  
  55. .ct-post-nav .ct-post-prev a:after{  
  56.     content: '«';  
  57.     left:0px;  
  58. }  
  59. .ct-post-nav .ct-post-next a:after{  
  60.     content: '»';  
  61.     right:0px;  
  62. }  
  63. .ct-post-nav div:hover a:after{  
  64.     color:#54829B;  
  65. }  
  66. .ct-post-nav div:hover a{  
  67.     color:#333;  
  68. }  
  69. /**左右移动样式end*/  

html:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!--左右移动样式html start-->  
  2. <div class="ct-post-nav">  
  3. <div class="ct-post-prev">  
  4. <a></a>  
  5. </div>  
  6. <div class="ct-post-next">  
  7. <a></a>  
  8. </div>  
  9. </div>  
  10. <!--左右移动样式html end-->  

一个before after在样式中的用法：

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /**测试before的使用 当然还有after*/  
  2. .icon-right:before {  
  3.     content: "abcdefg";  
  4. }  
html：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!--测试before的使用-->  
  2. <p>  
  3. <span class="arrowIcon icon-right">xx</span>  
  4. </p>  

这篇关于HTML鼠标移动到图片上时显示阴影边框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/803685。

相关文章

Java实现数据库图片上传功能详解

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到
阅读更多...
Linux虚拟机不显示IP地址的解决方法(亲测有效)

Linux虚拟机不显示IP地址的解决方法(亲测有效)

《Linux虚拟机不显示IP地址的解决方法(亲测有效)》本文主要介绍了通过VMware新装的Linux系统没有IP地址的解决方法,主要步骤包括：关闭虚拟机、打开VM虚拟网络编辑器、还原VMnet8或修... 目录前言步骤0.问题情况1.关闭虚拟机2.China编程打开VM虚拟网络编辑器3.1 方法一：点击还原VM
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...
Python使用PIL库将PNG图片转换为ICO图标的示例代码

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中，ICO图标是一种常用的图像
阅读更多...
前端bug调试的方法技巧及常见错误

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》：本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误
阅读更多...
SpringBoot集成图片验证码框架easy-captcha的详细过程

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2