今天页面上需要，就一直在网上找关于浮动加边框的样式，一直没有合适的，要不就是不显示，要不就是图片移动了，特意找了一个保存起来，以后的时候直接调用。
<!DOCTYPE HTML>
<html>
<head>
<title>css实现鼠标悬停时图片加边框效果</title>
<style type="text/css">
body{background:#222;color:#06c;}
em{ font-style:inherit;}
img{background:white;margin:0 5px;width:70px;height:70px;}
img:hover{border:1px red solid;}
.demo2 img{border:1px solid transparent;}
.demo2 img:hover{border:1px red solid;}
.demo3 img:hover{width:68px;height:68px;border:1px solid yellow;}
</style>
</head>
<body>
<div class="demo1">
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<em>明显看到当img标签在hover的时候由于出现边框导致位移</em>
</div>
<div class="demo2">
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<em>给每个img添加border:1px solid transparent;世界就和平了</em>
</div>
<div class="demo3">
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<em>修改width和height,世界继续和平</em>
</div>
</body>
</html>
个人推荐第三种方式去加边框，效果更好。
分享到：
相关推荐
开发者可以通过编辑这个文件，添加图片、设置CSS样式和JavaScript事件处理函数，以达到鼠标悬停时突出显示图片和显示浮动文字的效果。 综上所述，实现“鼠标焦点突出显示所悬停图片及显示浮动文字”的功能，需要...
例如，鼠标悬浮在图片上时添加边框的动画效果就是一种常见的交互设计。本文将详细介绍如何使用JavaScript（特别是jQuery库）和特定的插件jquery.insetborder.js来实现鼠标悬浮给图片加边框的效果。 首先，我们需要...
"鼠标移动到图片上给图片加阴影/左右移动样式"是一种常见的交互设计技术，它可以使用户在悬停鼠标时感受到图像的变化，从而增加与网页的互动性。这种效果主要依赖于CSS（层叠样式表）来实现，下面将详细介绍如何通过...
本文将深入探讨如何使用jQuery实现一个功能，即当鼠标悬停到图片时，一个浮动的高亮透明层会滑动到当前图片进行高亮显示。这个功能在网站设计中常见于图片展示或画廊应用，可以增强用户体验，突出图片焦点。 首先，...
标题中的“jquery图片边框阴影浮动.rar”表明这是一个使用jQuery库实现的JavaScript特效，主要功能是为图片添加动态边框阴影。在Web开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画...
在网页设计中，我们经常需要实现一些交互效果来提升用户体验，比如当用户将鼠标悬停在图片上时，图片会显示出边框。这种效果在HTML和CSS中可以通过一些技巧实现，我们称之为“鼠标经过图片显示边框hack”。这个hack...
本文将详细讲解如何利用jQuery实现“hover图片放大特效”，即当鼠标滑过图片时，图片的浮动层会变大显示，提供更丰富的视觉体验。 首先，我们需要在HTML中设置基础结构。这通常包括一个`<img>`标签来展示原始图片，...
3. **CSS样式控制**：为了实现div的浮动和显示，我们可能需要通过JS动态改变div的CSS样式，比如`display`属性，使其在鼠标移到input上时变为可见。 接下来，我们详细讲解实现这个功能的步骤： 1. **选择元素**：...
【标题】：“鼠标悬浮浮動放大expand效果” 在网页设计中，鼠标悬浮效果是一种常见的交互设计手法，可以提升用户体验，使用户更容易理解页面元素的功能。"鼠标悬浮浮動放大expand效果"指的是当用户将鼠标光标悬停在...
在JavaScript（JS）编程中，实现“鼠标悬停到图片上显示文字详情效果”是一种常见的交互设计技术，它能够提升用户体验，使用户更容易理解图片所代表的信息。这种效果通常是通过结合HTML、CSS以及JavaScript来实现的...
在这个场景中，我们可能有一个图像或按钮控件作为触发器，当鼠标移到该控件上方时，显示图片。首先，添加一个PictureBox控件，用于展示浮出的图片。这个PictureBox可以设置为透明或者半透明，以便不影响背景的显示。...
这涉及到CSS（层叠样式表）的运用，特别是浮动属性（`float`），如`float:left`或`float:right`，这些属性可以将元素（如图片）设置为在父元素内向左或向右浮动，以便与其他内容交互。 描述中提到的“浮动图片效果...
标题中的"JQuery实现鼠标移动到图片上显示边框效果"指的是使用JavaScript库JQuery来设计一个交互功能，当用户将鼠标悬停在图片上时，图片会自动显示一个边框。这种效果常用于增强用户体验，使用户更容易注意到被鼠标...
在网页设计中，提高用户体验是至关重要的，"Jquery 鼠标浮动层"就是一种实现这一目标的技术手段。这个技术允许用户在鼠标悬停在某个元素（如标题）上时，显示更多的相关信息，而无需点击或滚动页面，极大地提高了...
当鼠标移到图片上时，显示浮动层；当鼠标移开时，隐藏浮动层。 ```javascript document.querySelector('img').addEventListener('mouseover', function() { var description = this.getAttribute('data-...
在这个特定的案例中，“jQuery 图片特效，鼠标经过图标高亮显示”是一种增强用户体验的技术，当用户将鼠标悬停在图标上时，图标会变得更为醒目，吸引用户的注意力并提供视觉反馈。 实现这一效果的基本步骤如下： 1...
标题中的“鼠标移动到图片或者文字上浮现图片”是一种常见的网页交互效果，通常被称为“悬停弹出”或“mouseover提示”。这种效果在网站设计中很常见，它可以帮助用户预览图片或获取文字的附加信息，提升用户体验。...
在IT行业中，图片浮动显示是一种常见的视觉效果，尤其在网页设计、软件开发或者广告展示等领域。这个场景下，我们讨论的是如何在VC++环境中实现图片按照预设路径在当前窗口上进行漂浮显示。让我们深入了解一下相关的...
"纯CSS3鼠标点击图片叠加浮动层注释信息"这一主题涉及到的技术点主要包括CSS3的选择器、过渡效果、伪类以及相对定位等。 首先，我们需要理解CSS3中的选择器。选择器是CSS3中用来指定需要应用样式的HTML元素的方式。...
4. **CSS样式**：为了使提示框看起来更像浮动效果，可以为其添加CSS样式，如定位、背景色、边框等。 ```css #tooltip { position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 5px;...