1. 论坛系统升级为Xenforo,欢迎大家测试!
    Dismiss Notice

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

Discussion in '前端开发' started by 天堂, Oct 11, 2006.

  1. 天堂

    天堂 New Member

    Joined:
    Oct 11, 2006
    Messages:
    2
    Likes Received:
    0
    我用css定义了图片的边框
    img.framed {
    padding: 6px;
    border: 1px solid #FFCC66;
    background-color: #FFF;
    }

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

    谢谢.
     
  2. 小卓

    小卓 New Member

    Joined:
    Feb 3, 2006
    Messages:
    21
    Likes Received:
    0
    .img.framed a:hover {border: 1px solid #FFCC66;}
    试试这样
     
  3. 帅气十足也

    帅气十足也 Active Member

    Joined:
    Mar 9, 2006
    Messages:
    1,511
    Likes Received:
    9
    img是不具备hover伪类的,可以用js实现
    Code:
    <!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

    Joined:
    Feb 3, 2006
    Messages:
    21
    Likes Received:
    0
    应该加上li吧想作的太标准的话这样好像不行.img.framed a:hover {border: 1px solid #FFCC66;}
     
  5. 帅气十足也

    帅气十足也 Active Member

    Joined:
    Mar 9, 2006
    Messages:
    1,511
    Likes Received:
    9
    老鬼来回答:D
     
  6. 帅气十足也

    帅气十足也 Active Member

    Joined:
    Mar 9, 2006
    Messages:
    1,511
    Likes Received:
    9
    ch首页的酷站欣赏那就有的,叫老鬼来回答吧
     
  7. 天堂

    天堂 New Member

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