Last active
December 31, 2015 15:59
-
-
Save diegoslva/8010204 to your computer and use it in GitHub Desktop.
iniciando minha jornada com Javascript / JQuery ( que por sinal já estava na hora hehe =) )
Não sei se foi a melhor opção mas funcionou bem a minha necessidade, um dia eu volto pra melhorar esse código...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>MouseOver</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Add your site or application content here --> | |
| <nav> | |
| <a href="#"> | |
| <li class="col about" ><div class="icon icon-about"></div> | |
| <p class="description-about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, veritatis laudantium harum deserunt tempore odit. Beatae, error, aut veniam autem ad tempora modi facilis ab nesciunt minima laborum necessitatibus commodi!</p> | |
| </li></a> | |
| <a href="#"> | |
| <li class="col career"><div class="icon icon-earth"></div> | |
| <p class="description-career">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, veritatis laudantium harum deserunt tempore odit. Beatae, error, aut veniam autem ad tempora modi facilis ab nesciunt minima laborum necessitatibus commodi!</p> | |
| </li></a> | |
| <a href="#"> | |
| <li class="col blog"><div class="icon icon-quill"></div> | |
| <p class="description-blog">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, veritatis laudantium harum deserunt tempore odit. Beatae, error, aut veniam autem ad tempora modi facilis ab nesciunt minima laborum necessitatibus commodi!</p> | |
| </li></a> | |
| <a href="#"> | |
| <li class="col jobs"><div class="icon icon-jobs"></div> | |
| <p class="description-jobs">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, veritatis laudantium harum deserunt tempore odit. Beatae, error, aut veniam autem ad tempora modi facilis ab nesciunt minima laborum necessitatibus commodi!</p> | |
| </li></a> | |
| </nav> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> | |
| <script src="mouseover.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.about').on({ | |
| mouseenter: function () { | |
| $(".icon-about").hide(); //On mouseover, hode the first div | |
| $(".description-about").show(); | |
| }, | |
| mouseleave: function () { | |
| $(".description-about").hide(); | |
| $(".icon-about").show(); | |
| } | |
| }); | |
| $('.career').on({ | |
| mouseenter: function () { | |
| $(".icon-earth").hide(); //On mouseover, hode the first div | |
| $(".description-career").show(); | |
| }, | |
| mouseleave: function () { | |
| $(".description-career").hide(); | |
| $(".icon-earth").show(); | |
| } | |
| }); | |
| $('.blog').on({ | |
| mouseenter: function () { | |
| $(".icon-quill").hide(); //On mouseover, hode the first div | |
| $(".description-blog").show(); | |
| }, | |
| mouseleave: function () { | |
| $(".description-blog").hide(); | |
| $(".icon-quill").show(); | |
| } | |
| }); | |
| $('.jobs').on({ | |
| mouseenter: function () { | |
| $(".icon-jobs").hide(); //On mouseover, hode the first div | |
| $(".description-jobs").show(); | |
| }, | |
| mouseleave: function () { | |
| $(".description-jobs").hide(); | |
| $(".icon-jobs").show(); | |
| } | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .col { | |
| background:#f00; | |
| display: inline-block; | |
| min-height: 50%; | |
| float: left; | |
| position:relative; | |
| width: 50%; | |
| } | |
| .about { | |
| background-color: #e64c65; | |
| } | |
| .career{ | |
| background-color: #4fc4f6; | |
| } | |
| .blog{ | |
| background-color: #fcb150; | |
| } | |
| .jobs{ | |
| background-color: #11a8ab; | |
| } | |
| .icon { | |
| font-size: 7em; | |
| color: white; | |
| text-align: center; | |
| margin-top: 25%; | |
| top: -66px; | |
| } | |
| /* hover dos menus */ | |
| .description-about, | |
| .description-career, | |
| .description-blog, | |
| .description-jobs { | |
| font-size: 1.2em; | |
| display: none; | |
| width: 100%; | |
| height: 50%; | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .icon-twitter:before { content: ''; } /* 'e602' */ | |
| .icon-facebook:before { content: ''; } /* 'e603' */ | |
| .icon-github:before { content: '📂'; } /* 'e601' */ | |
| .icon-quill:before { content: ''; } /* 'e600' */ | |
| .icon-earth:before { content: '';} /* 'e605' */ | |
| .icon-jobs:before { content: ''; } /* 'e604' */ | |
| .icon-about:before { content: ''; }/*e606*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment