JQuery: Difference between revisions
Jump to navigation
Jump to search
Created page with "{{lowercase title}} == Example == ==== HTML (index.html) ==== <pre> <html> <head> <title>Button Magic</title> <link rel='stylesheet' type='text/css' href='styles..." |
|||
| Line 6: | Line 6: | ||
==== HTML (index.html) ==== | ==== HTML (index.html) ==== | ||
<pre> | <pre> | ||
<html> | <html><head><title>Button Magic</title> | ||
<link rel='stylesheet' type='text/css' href='stylesheet.css'/> | |||
<script type='text/javascript' src='script.js'></script> | |||
</head><body> | |||
<div><br/><strong>Click Me!</strong></div> | |||
</head> | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 18:01, 25 June 2014
Example
HTML (index.html)
<html><head><title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head><body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
CSS (stylesheet.css)
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
JavaScript (script.js)
$(document).ready(function(){
$('div').mouseenter(function(){
$('div').fadeTo('fast', 1.0);
});
$('div').mouseleave(function(){
$('div').fadeTo('fast', 0.5);
});
});