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"> </a> <a href="search\index.html"><img src="img\smoelenboek.png" alt="image rounded corners" class="img-rounded"> <a href="alert\alert.html"><img src="img\aagje-alert.png" alt="image rounded corners" class="img-rounded"></a></p><p> <small>hoe werkt smoelenboek aagje alert <br> het? </small><br> <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded"> <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded"> <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"> <img src="img\alert.jpg" alt="image rounded corners" class="img-rounded"> <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
Post a Comment