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。

相关文章

详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
如何设置vim永久显示行号

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
C#中图片如何自适应pictureBox大小

C#中图片如何自适应pictureBox大小

《C#中图片如何自适应pictureBox大小》文章描述了如何在C#中实现图片自适应pictureBox大小,并展示修改前后的效果,修改步骤包括两步,作者分享了个人经验,希望对大家有所帮助... 目录C#图片自适应pictureBox大小编程修改步骤总结C#图片自适应pictureBox大小上图中“z轴
阅读更多...
使用Python将长图片分割为若干张小图片

使用Python将长图片分割为若干张小图片

《使用Python将长图片分割为若干张小图片》这篇文章主要为大家详细介绍了如何使用Python将长图片分割为若干张小图片,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. python需求的任务2. Python代码的实现3. 代码修改的位置4. 运行结果1. Python需求
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
电脑显示hdmi无信号怎么办? 电脑显示器无信号的终极解决指南

电脑显示hdmi无信号怎么办? 电脑显示器无信号的终极解决指南

《电脑显示hdmi无信号怎么办?电脑显示器无信号的终极解决指南》HDMI无信号的问题却让人头疼不已，遇到这种情况该怎么办？针对这种情况，我们可以采取一系列步骤来逐一排查并解决问题，以下是详细的方法... 无论你是试图为笔记本电脑设置多个显示器还是使用外部显示器，都可能会弹出“无HDMI信号”错误。此消息可能
阅读更多...
使用 Python 和 LabelMe 实现图片验证码的自动标注功能

使用 Python 和 LabelMe 实现图片验证码的自动标注功能

《使用Python和LabelMe实现图片验证码的自动标注功能》文章介绍了如何使用Python和LabelMe自动标注图片验证码,主要步骤包括图像预处理、OCR识别和生成标注文件,通过结合Pa... 目录使用 python 和 LabelMe 实现图片验证码的自动标注环境准备必备工具安装依赖实现自动标注核心
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2