Skip to content

Instantly share code, notes, and snippets.

@diegoslva

diegoslva/index.html

Last active December 31, 2015 15:59
Show Gist options
  • Save diegoslva/8010204 to your computer and use it in GitHub Desktop.
Save diegoslva/8010204 to your computer and use it in GitHub Desktop.
Download ZIP
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...
Raw
index.html
<!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>
Raw
mouseOver.js
$('.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();
}
});
Raw
style.css
.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