向高手询问一个比较弱的css有关问题<a>为啥包不住<img>
日期：2014-05-17 浏览次数：20741 次
向高手询问一个比较弱的css问题<a>为啥包不住<img>
以上代码会出现下面效果：
想要的效果是当鼠标移到图片上时，图片的边框显示出来为红色虚线。 为啥实际效果<a>包不住<img>?
------解决方案--------------------
.faceul li a{height:223px;display:inline-block;
}
<body>
<div class="containter">
<ul class="faceul">
<li>
<a target="_blank" href="http://www.google.com.hk"><img src="images/google.png" /></a>
</li>
<li>
<a target="_blank" href="http://www.baidu.com"><img src="images/baidu.png" /></a>
</li>
<li>
<a target="_blank" href="http://www.iqiyi.com"><img src="images/iqiyi.png" /></a>
</li>
</ul>
</div>
</body>
/* CSS Document */
body {margin:0; padding: 2px;}
.containter{
margin:0; padding:0; border:solid #3399FF 1px; height:225px; width:auto;
}
.faceul{border: 0;
}
.faceul li{ list-style-type:none; float:left;
}
.faceul li a{height:223px;
}
.faceul li a img{border:none;
}
.faceul li a:hover{border:dashed 1px #F00;
}
以上代码会出现下面效果：
想要的效果是当鼠标移到图片上时，图片的边框显示出来为红色虚线。 为啥实际效果<a>包不住<img>?
CSS
HTML
------解决方案--------------------
.faceul li a{height:223px;display:inline-block;
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
