red_concise 模板 怎么实现鼠标指向图片，边框变色

2016-07-07 16:06 来源：www.chinab4c.com 作者：ecshop专家



red_concise 模板 怎么实现鼠标指向图片，边框变色

未命名.jpg

鼠标指向商品图片后，使灰色边框变成其他颜色。以下是控制图片的CSS代码，需要怎么修改才能实现，请求帮助！
只知道原来的边框颜色是 E4E4E4。

  2. /*--- goods_grid ---*/
  3. .goods_grid{ display:block; overflow:hidden; zoom:1; padding:0 0 0 4px;}
  4. .goods_grid li{ width:160px; float:left; padding:11px 9px 9px;}
  5. .goods_grid .img{border:1px solid #E4E4E4; width:160px; height:160px;}
  6. .goods_grid .img img{width:160px; height:160px;}
  7. .goods_grid .name{text-align:center; height:28px; padding-top:4px; overflow:hidden; line-height:14px; width:160px;}
  8. .goods_grid .price{text-align:center; :20px; width:160px; line-height:20px; overflow:hidden; }
  9. /*--- goods_grid2 ---*/
  10. .goods_grid2{ display:block; overflow:hidden; zoom:1; padding:0 0 0 4px;}
  11. .goods_grid2 li{ width:160px; float:left; padding:11px 9px 9px;}
  12. .goods_grid2 .img{border:1px solid #E4E4E4; width:160px; height:160px;}
  13. .goods_grid2 .img img {width:160px; height:160px;}
  14. .goods_grid2 .img a{height:160px; height:160px; display:block;}
  15. .goods_grid2 .name{text-align:center; height:25px; overflow:hidden; line-height:25px; font-size:12px; font-weight:bold; width:160px;}
  16. .goods_grid2 .market_price{text-decoration:line-through; color:#000;}
  17. .goods_grid2 .price{text-align:center; font-size:12px; color:#CE2104; width:160px; line-height:20px; overflow:hidden; }
复制代码

回答：
自己顶一下

自己顶一下

贴一下地址



是本地测试的，借用别人的网站演示下，http://www.ht173.cn/

看怎么实现鼠标移到商品图片，边框变色。

自己顶一下

加一个样式
.goods_grid .img a:hover img {
border: 1px solid #990000;
width:160px; height:160px;
}
1px为宽度值，#990000为边框颜色，自己调节



谢谢版主的帮助，我把这段代码加上后，鼠标指向图片，图片向右下偏移了1PX，图片边框是加上了，可以原来的 E4E4E4灰色边框没有偏移，颜色也没有变。

能否让鼠标指向图片后 E4E4E4 边框变色，而图片不动呢？我的代码是这样加的。



  3. /*--- goods_grid ---*/
  4. .goods_grid{ display:block; overflow:hidden; zoom:1; padding:0 0 0 4px;}
  5. .goods_grid li{ width:160px; float:left; padding:11px 9px 9px;}
  6. .goods_grid .img{border:1px solid #E4E4E4; width:160px; height:160px;}
  7. .goods_grid .img a:hover img {border: 1px solid #990000;width:160px; height:160px;}
  8. .goods_grid .img img{width:160px; height:160px;}
  9. .goods_grid .name{text-align:center; height:28px; padding-top:4px; overflow:hidden; line-height:14px; width:160px;}
  10. .goods_grid .price{text-align:center; :20px; width:160px; line-height:20px; overflow:hidden; }
  11. /*--- goods_grid2 ---*/
  12. .goods_grid2{ display:block; overflow:hidden; zoom:1; padding:0 0 0 4px;}
  13. .goods_grid2 li{ width:160px; float:left; padding:11px 9px 9px;}
  14. .goods_grid2 .img{border:1px solid #E4E4E4; width:160px; height:160px;}
  15. .goods_grid2 .img img {width:160px; height:160px;}
  16. .goods_grid2 .img a{height:160px; height:160px; display:block;}
  17. .goods_grid2 .name{text-align:center; height:25px; overflow:hidden; line-height:25px; font-size:12px; font-weight:bold; width:160px;}
  18. .goods_grid2 .market_price{text-decoration:line-through; color:#000;}
  19. .goods_grid2 .price{text-align:center; font-size:12px; color:#CE2104; width:160px; line-height:20px; overflow:hidden; }
复制代码

再置顶一次

.goods_grid .img{border:1px solid #E4E4E4; width:160px; height:160px;}
把红色标注的去掉
再加个这个代码
.goods_grid .img a:link img {
border: 1px solid #E4E4E4;
width:160px; height:160px;
}

谢谢版主，问题解决了

.goodsItem_re{width:190px; float:left; position:relative; overflow:hidden; padding:0px 6px 15px 15px; text-align:center }
.goodsItem_re .goodsimg{width:190px; height:190px; border:0px solid #cdcece; margin-bottom:4px; border:#ccc solid 1px}
.goodsItem_re p{text-align:center; color:#3f3f3f; font-weight:normal; display:block; line-height:18px; height:18px; overflow:hidden;}
.goodsItem_re p a{color:#3f3f3f; text-decoration:none;}
.goodsItem_re p a:hover{color:#ff6600; text-decoration:none;}
.goodsItem_re span{width:40px; height:40px; position:absolute;left:0px; top:0px;}
.goodsItem_re span.best{background:url(images/bg.gif) no-repeat 0px -304px;}
.goodsItem_re span.news{background:url(images/bg.gif) no-repeat -75px -304px;}
.goodsItem_re span.hot{background:url(images/bg.gif) no-repeat -161px -304px;}

这个代码应该怎样修改才能实现这种效果

  1. .goodsItem_re{width:190px; float:left; position:relative; overflow:hidden; padding:0px 6px 15px 15px; text-align:center }
  2. .goodsItem_re .goodsimg{width:190px; height:190px; border:0px solid #cdcece; margin-bottom:4px; border:#e4e4e4 solid 1px}
  3. .goodsItem_re p{text-align:center; color:#3f3f3f; font-weight:normal; display:block; line-height:18px; height:18px; overflow:hidden;}
  4. .goodsItem_re p a{color:#3f3f3f; text-decoration:none;}
  5. .goodsItem_re p a:hover{color:#ff6600; text-decoration:none;}
  6. .goodsItem_re span{width:40px; height:40px; position:absolute;left:0px; top:0px;}
  7. .goodsItem_re span.best{background:url(images/bg.gif) no-repeat 0px -304px;}
  8. .goodsItem_re span.news{background:url(images/bg.gif) no-repeat -75px -304px;}
  9. .goodsItem_re span.hot{background:url(images/bg.gif) no-repeat -161px -304px;}
复制代码

我的网站是这样的，怎么按楼上的方法不能实现？请高手指点