`
jsntghf
  • 浏览: 2527766 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS实现图片选中加边框效果

阅读更多
<link href="/stylesheets/panda.css" media="screen" rel="stylesheet" type="text/css"/>
<div class="box" >
  <a href="javascript:void(0);" >
    <span>功夫熊猫</span>
    <img src="/images/panda.gif" alt="功夫熊猫" border="0"/>
  </a>
</div>

 

.box{width:200px;height:229px;position:relative;}
.box a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}
.box a:hover{border:1px solid #000;background-color:#333;text-decoration: none;}
.box a span{display:none; text-align:center; font-size:12px;}
.box a:hover span{color:#FFF;display:block;background-color:#333;width:210px;position:absolute;top:220px;left:0px;line-height:20px;}
.box a img{width:200px;height:229px;}

 选中前:

选中后:

分享到:
评论
5 楼 ulear 2009-12-10  
思路不错,学习了
4 楼 qianwan 2009-12-09  
学习了,我之前就在找这个资料。
3 楼 phpxiaoxin 2009-11-18  
好像很普通的手法,没看出什么特别的?
2 楼 youjianbo_han_87 2009-11-18  
8 错 8 错 8 错
1 楼 felixtsin 2009-11-11  
不错啊,收藏了

相关推荐

    css实现图片选中效果.rar

    在CSS(层叠样式表)中,我们可以通过各种技术实现图片的选中效果,这在网页设计中是非常常见的一种交互体验。"css实现图片选中效果.rar"这个压缩包文件可能包含了一个示例,用于演示如何用CSS创建类似蓝色理想网站...

    js漂亮图片选中效果

    在图片选中效果中,通常会为每个图片创建一个`div`,并利用CSS设置其背景图片、边框、阴影等样式。同时,通过CSS的`:hover`、`:active`伪类,可以在鼠标悬停或点击时改变图片的外观。 **网页特效** 是提高网页交互...

    css3美化单选按钮点击选中动画特效

    本项目"css3美化单选按钮点击选中动画特效"旨在通过CSS3技术实现一个吸引用户的交互体验,让原本单调的单选按钮在用户点击选中时展现出独特的视觉效果。 首先,我们需要了解HTML中的单选按钮元素。在HTML中,`...

    css实现图片选中效果特效代码

    在CSS(层叠样式表)中,实现图片选中效果特效是通过巧妙地利用选择器、伪类和一些动画效果来达成的。这种效果常见于网站的图片展示区域,能够增强用户交互体验,吸引用户的注意力。下面我们将详细讨论如何利用CSS...

    拖动,提示,表格,导航,选中加边框

    本资源"拖动,提示,表格,导航,选中加边框"是一份作者精心整理的jQuery实践示例,特别适合初学者用来学习和参考。以下将对这些功能进行详细介绍: 1. **JQuery实现DIV层拖动**: 在网页设计中,有时我们需要创建...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    2. **CSS选择器与盒模型**:为了实现TAB选项卡的效果,我们需要对不同的状态(如选中、未选中)应用不同的样式。这需要用到CSS选择器,如类选择器`.active`,以及理解盒模型(包括`padding`、`border`和`margin`)以...

    css3实现动画边框菜单.zip

    在本文中,我们将深入探讨如何使用CSS3来创建动态边框菜单,并结合JavaScript实现更丰富的交互效果。"css3实现动画边框菜单.zip"这个压缩包文件可能包含了一个示例项目,用于展示如何构建这样的菜单。我们将从CSS3的...

    JavaScript & CSS 实现div选中

    结合以上内容,我们可以看到,通过JavaScript和CSS,我们可以优雅地实现div的选中效果,提供良好的用户体验和视觉反馈。在实际应用中,还要根据具体需求进行调整,例如添加动画效果、优化性能、处理边界情况等。文件...

    纯CSS3实现DIV高亮显示特效

    "纯CSS3实现DIV高亮显示特效"是一种技术,它利用CSS3的特性,无需依赖JavaScript或图像,就能创建出吸引人的高亮效果。这篇文章将深入探讨如何使用CSS3来实现这一效果。 首先,我们要了解CSS3的一些基本概念。CSS3...

    纯CSS+jQuery制作的相册里图片选中效果一点选中再点取消选中

    CSS选中效果可以通过`:checked`伪类实现,通常与`input[type="checkbox"]`元素结合使用。在HTML中,我们可以为每张图片创建一个隐藏的复选框,并将它们与图片通过`label`元素关联。这样,当用户点击图片时,实际上是...

    jQuery css3边框动画制作鼠标悬停图片边框动画特效

    "jQuery css3边框动画制作鼠标悬停图片边框动画特效"是一个利用jQuery和CSS3技术实现的交互式设计,它允许用户在鼠标悬停在图片上时,图片的边框产生吸引人的动画效果。下面将详细介绍如何实现这一功能。 首先,...

    纯css3带动画效果的左右滑动按钮

    【纯css3带动画效果的左右滑动按钮】是一种利用CSS3特性实现的交互式设计,主要用于创建具有平滑动画和视觉吸引力的开关按钮。在现代网页设计中,这种按钮常用于用户界面,如设置选项、开启/关闭功能等。CSS3作为...

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先,`div`是HTML中的一个块级元素,它可以被用作容器,用于组织页面内容。在创建导航菜单时,`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    jQuery+css实现的给图片拍照效果.rar

    在图片拍照效果中,CSS可能会用于创建相机镜头的样式,比如阴影、边框、滤镜等,以模拟真实相机的视觉效果。同时,CSS3的转换(transform)和过渡(transition)属性可以用来实现点击按钮后,图片逐渐变暗或者出现...

    JS实现单个图片选中美化框.zip

    可以为选中的图片添加一个边框或者阴影,或者改变图片的透明度。这可以通过修改CSS类或者直接修改图片元素的样式来实现。 ```javascript img.addEventListener('click', function() { // ...之前的代码... this....

    图片边框变换CSS Hover状态效果一例.rar

    当用户将鼠标光标悬停(Hover)在图片上时,通过CSS可以实现边框的改变,如边框宽度、颜色、样式(实线、虚线等)的变化,甚至可以添加动画效果,让边框逐渐出现或消失,使交互更具吸引力。这种效果不仅提升了网页的...

    纯css3图片点击弹出动画遮罩层效果

    首先,"纯CSS3"意味着在这个效果的实现过程中,没有使用JavaScript或其他编程语言,完全依赖于CSS3的样式规则和动画功能。这包括选择器、盒模型、边框和背景、过渡(transition)、动画(animation)以及新的布局...

    css+div漂亮的圆角tab选项卡

    在CSS中,可以使用`background-image`属性将这些图片应用到元素上,以增强视觉效果。 综上所述,创建"css+div漂亮的圆角tab选项卡"需要理解HTML的基本结构,掌握CSS3的`border-radius`、伪类选择器、过渡效果等特性...

    使用CSS属性制作图片HTML缩略图

    然而,为了实现缩略图效果,我们可以利用CSS的`max-width`和`max-height`属性限制图片的最大尺寸,而不是直接设定固定宽度和高度。这样可以保持图片的比例,避免拉伸变形: ```css img { max-width: 100%; /* 图片...

    纯CSS实现选项卡效果

    总结来说,纯CSS实现的选项卡效果依赖于HTML结构和CSS选择器的巧妙应用,可以有效地实现用户界面的动态切换,而无需JavaScript的参与。这种方法简化了代码,提高了性能,同时也降低了技术栈的复杂度,对于初学者和...

Global site tag (gtag.js) - Google Analytics