Heim > Web-Frontend > HTML-Tutorial > CSS如何实现当鼠标放在图片上时改变边框_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:31:43
Original
1384 Leute haben es durchsucht

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> 
Nach dem Login kopieren

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

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

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

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage