jquery - How can i add hover effect to buttons? -



jquery - How can i add hover effect to buttons? -

can help me out. need create button effect img buttons created. there css solution need create other buttons? hope can help me because need effect.

<html><head> <title>mobiel</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- bootstrap --> <link href="css\bootstrap.min.css" rel="stylesheet" media="screen"> <link rel="stylesheet" href="css\styles_responsive.css" type="text/css" media="screen" title="no title" charset="utf-8"> <style> body { padding: 50px } </style><!-- html5 shim , respond.js ie8 back upwards of html5 elements , media queries --><!-- warning: respond.js doesn't work if view page via file:// --><!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <script> if (navigator.useragent.match(/iemobile\/10\.0/)) { var msviewportstyle = document.createelement("style"); msviewportstyle.appendchild( document.createtextnode( "@-ms-viewport{width:auto!important}" ) ); document.getelementsbytagname("head")[0]. appendchild(msviewportstyle); } </script> <style> .navbar { position: left; overflow: visible; padding-top: 0; } </style> <style type="text/css"> li{list-style-type:none;float:left;} a{text-align:center} </style> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <img src="img\logo_helpen.jpg" alt="logo"></div></div></div> <p> </p><p> </p><p> <br> <a href="#"><img src="img\hoe-werkt-het.png" alt="hoe werkt het?" name="hoe werkt het?" class="img-rounded">&nbsp;&nbsp;&nbsp;&nbsp;</a> <a href="search\index.html"><img src="img\smoelenboek.png" alt="image rounded corners" class="img-rounded">&nbsp;&nbsp;&nbsp;&nbsp; <a href="alert\alert.html"><img src="img\aagje-alert.png" alt="image rounded corners" class="img-rounded"></a></p><p> <small>hoe werkt&nbsp; &nbsp;&nbsp; smoelenboek &nbsp; &nbsp;aagje alert <br>&nbsp; &nbsp; &nbsp; het? &nbsp;&nbsp;&nbsp;</small><br> <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded">&nbsp;&nbsp;&nbsp;&nbsp; <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded">&nbsp;&nbsp;&nbsp;&nbsp; <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded"></a></p> <br><a href="#"> <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded">&nbsp;&nbsp;&nbsp;&nbsp; <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded">&nbsp;&nbsp;&nbsp;&nbsp; <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded"></a><p><a href="#"> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js\bootstrap.min.js"></script> </a></p></body></html>

make code simpler... set images in css:

a .img-rounded{ background-image: url("image.png"); }

use :hover for hovering:

a .img-rounded:hover { background-image: url("hover.png"); }

jquery html css html5 twitter-bootstrap

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -