CSS如何实现当鼠标放在图片上时改变边框_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:31:43
Original
1370 people have browsed it

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> 
Copy after login

以上代码通过超链接伪类a:hover实现当鼠标放在图片上时候,边框发生变化。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4658

更多内容:http://www.softwhy.com/divcss/

 

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template