Home >Web Front-end >HTML Tutorial >CSS如何实现当鼠标放在图片上时改变边框_html/css_WEB-ITnose
CSS如何实现当鼠标放在图片上时改变边框_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:431388browse
CSS如何实现当鼠标放在图片上时改变边框:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
很多网页都有这样的效果，当鼠标放在图片链接上的时候，图片的边框会发生变化。
下面就简单介绍一下如何实现此种效果。
实例代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">a:hover img { border: 2px dotted red;}</style></head><body><a href="#"><img src="mytest/div+css/border.jpg" border="0" alt="战斗机" /></a></body></html> 以上代码通过超链接伪类a:hover实现当鼠标放在图片上时候，边框发生变化。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4658
更多内容:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：为什么list-style:none不起作用？_html/css_WEB-ITnoseNext article：为什么div右浮动后还会换行_html/css_WEB-ITnose