用CSS实现鼠标经过图片链接加边框效果代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS实现鼠标经过图片链接加边框效果代码</title>
</head>
<style type="text/css教程">
 .boxOut{
  height:150px;
  width:800px;
  border:1px solid #990000;
  float:left;
  overflow:hidden;
  }
 .boxOut a ,.boxOut a:hover{
  display:block;
  height:120px;
  width:110px;
  border:1px solid #00CCFF;
  float:left;  
  margin:10px;
 }
 .boxOut a:hover{
  border:2px solid #993300;
  
 }
</style>
<body>
 
 
<div class="boxOut">
 <a href="http://www.111cn.net"></a>
 <a href="http://www.111cn.net"></a>
 <a href="http://down.111cn.net"></a>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
</div>
</body>
</html>

时间: 2025-01-20 18:48:48

用CSS实现鼠标经过图片链接加边框效果代码的相关文章

jQuery实现图片预加载效果_jquery

本文实例讲述了jQuery实现图片预加载效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div class="main"> <br> <div class="title">图片预加载</div> <div class="content"> <div class="img"> <a href="

jQuery实现的感应鼠标悬停图片色彩渐显效果

 这篇文章主要介绍了jQuery实现的感应鼠标悬停图片色彩渐显效果,涉及jQuery中hover.find.css等方法的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

jquery 图片加载效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

IE图片链接有边框解决方法小结

今天在修改一个页面,发现ie下显示图片链接有边框,如图所示: 解决办法如下:  代码如下 复制代码 img{ border:none;} 或者直接在图片上加border=0  代码如下 复制代码 <img src='xxx' border=0 />

java给图片加水印效果代码

以前用到的java给图片加水印效果代码都有些小问题,今天我们修正了里面的问题 增加了补白的功能 重构了代码 import java.awt.alphacomposite; import java.awt.color; import java.awt.font; import java.awt.graphics2d; import java.awt.image; import java.awt.geom.affinetransform; import java.awt.image.affinetr

jQuery实现响应鼠标背景变化的动态菜单效果代码_jquery

本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

js+css实现超简洁的二级下拉菜单效果代码_javascript技巧

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

js实现鼠标点击左上角滑动菜单效果代码_javascript技巧

本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

几款js图片等比例缩放效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont