1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

慕名而来,请教各位大侠一个关于css图片边框的问题.

本帖由 天堂2006-10-11 发布。版面名称:前端开发

  1. 天堂

    天堂 New Member

    注册:
    2006-10-11
    帖子:
    2
    赞:
    0
    我用css定义了图片的边框
    img.framed {
    padding: 6px;
    border: 1px solid #FFCC66;
    background-color: #FFF;
    }

    我要的效果是当鼠标移动到图片上时,图片的边框就变色成红色,鼠标移开时,又变回默认定义#FFCC66;色,请问要怎么做?

    谢谢.
     
  2. 小卓

    小卓 New Member

    注册:
    2006-02-03
    帖子:
    21
    赞:
    0
    .img.framed a:hover {border: 1px solid #FFCC66;}
    试试这样
     
  3. 帅气十足也

    帅气十足也 Active Member

    注册:
    2006-03-09
    帖子:
    1,511
    赞:
    9
    img是不具备hover伪类的,可以用js实现
    代码:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    <title>Untitled Document</title> 
    <style> 
    img { 
    padding: 6px; 
    border:1px solid #fc6; 
    background-color: #FFF;
    } 
    
    </style> 
    <script type="text/javascript"> 
    function imgchange(){ 
    var img=document.getElementsByTagName('img'); 
    var img_l=img.length; 
    for(var i=0;i<img_l;i++){ 
    if(img.ref=="change"){ 
    img.onmouseover=function(){ 
    this.style.border="1px solid #f00"; 
    } 
    img.onmouseout=function(){ 
    this.style.border="1px solid #fc6"; 
    } 
    } 
    } 
    } 
    window.onload=function(){ 
    imgchange(); 
    } 
    </script> 
    </head> 
    <body> 
    <img src="http://bbs.chinahtml.com/images/misc/vbulletin3_logo_white.gif" ref="change" /> 
    </body> 
    </html>
     
  4. 小卓

    小卓 New Member

    注册:
    2006-02-03
    帖子:
    21
    赞:
    0
    应该加上li吧想作的太标准的话这样好像不行.img.framed a:hover {border: 1px solid #FFCC66;}
     
  5. 帅气十足也

    帅气十足也 Active Member

    注册:
    2006-03-09
    帖子:
    1,511
    赞:
    9
    老鬼来回答:D
     
  6. 帅气十足也

    帅气十足也 Active Member

    注册:
    2006-03-09
    帖子:
    1,511
    赞:
    9
    ch首页的酷站欣赏那就有的,叫老鬼来回答吧
     
  7. 天堂

    天堂 New Member

    注册:
    2006-10-11
    帖子:
    2
    赞:
    0
    谢谢帅气十足也,但是我就是想用css来实现,同时要保留background-color: #FFF; 和padding: 6px;的效果,我是在改一个文章程序的模板,我用了小桌的代码后,首页全部的图片都变得加边框了,我改的模板页面是show.htm,我只要show.htm这个页面里面的图片有这种效果