2 Replies Latest reply: Jul 3, 2013 11:56 AM by Nancy O. RSS

    css tricks in dreamweaver cc

    timpennells Community Member

      I have a really simple website, that have 4 links on the left sidebar and the 4 images in the content area.

       

      what i want to do is, when i hover over an image the relevant link fades out also when you hover over a link the relevant image fades out.

       

      any help would be gratefully recieved

      Tim

        • 1. Re: css tricks in dreamweaver cc
          MurraySummers CommunityMVP

          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. CommunityMVP

            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.