This content has been marked as final.
Show 2 replies
-
1. Re: css tricks in dreamweaver cc
MurraySummers Jul 3, 2013 11:44 AM (in response to timpennells)This should be simple enough using CSS transitions. Can you post a link to your page so we can see the code?
-
2. Re: css tricks in dreamweaver cc
Nancy O. Jul 3, 2013 11:56 AM (in response to timpennells)Very easy to do with jQuery.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 with jQuery</title> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <style> nav { float: left; width: 230px } nav ul li { margin: 0; padding: 0; list-style: none; font-weight: bold; font-size: 18px; } nav li a { text-decoration: none; background-color: #054573; color: #FFF; padding: 12px; line-height: 3em; border: 1px solid #333; margin: 6px; } aside { margin-top: 45px; width: 500px; float: left } footer { clear: left; display: block; } </style> </head> <body> <nav> <ul> <li><a class="one" href="page1.html">Link to page 1</a></li> <li><a class="two" href="page2.html">Link to page 2</a></li> <li><a class="three" href="page3.html">Link to page 3</a></li> </ul> </nav> <aside> <a class="one" href="page1.html">INSERT IMAGE 1 HERE</a> <a class="two" href="page2.html">INSERT IMAGE 2 HERE</a> <a class="three" href="page3.html">INSERT IMAGE 3 HERE</a> </aside> <footer> <small>© 2013 XYZ Company. All rights reserved</small> </footer> <!--jquery function--> <script> $(document).ready(function () { $('.one').hover( function () { $('.one').stop().animate({ "opacity": "0.5" }, "slow"); }, function () { $('.one').stop().animate({ "opacity": "1.0" }, "slow"); }); $('.two').hover( function () { $('.two').stop().animate({ "opacity": "0.5" }, "slow"); }, function () { $('.two').stop().animate({ "opacity": "1.0" }, "slow"); }); $('.three').hover( function () { $('.three').stop().animate({ "opacity": "0.5" }, "slow"); }, function () { $('.three').stop().animate({ "opacity": "1.0" }, "slow"); }); }); </script> </body> </html>Nancy O.


