7
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script>
$("div#contenthead div.left span").hover(function() {
$("div#contenthead div.topmenu").addClass("displayblock");});
$("div#contenthead div.left span.cursos").hover(function() {
$("div#contenthead div.topmenu ul.cursos").addClass("displayblock");
$("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
$("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
$("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});
$("div#contenthead div.left span.atendimento").hover(function() {
$("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
$("div#contenthead div.topmenu ul.atendimento").addClass("displayblock");
$("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
$("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});
$("div#contenthead div.left span.acaosocial").hover(function() {
$("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
$("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
$("div#contenthead div.topmenu ul.acaosocial").addClass("displayblock");
$("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});
$("div#contenthead div.left span.calendario").hover(function() {
$("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
$("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
$("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
$("div#contenthead div.topmenu ul.calendario").addClass("displayblock");});
$("div#contenthead div.right span.login").hover(function() {
$("div#contenthead div.topmenu ul.cursos").removeClass("displayblock");
$("div#contenthead div.topmenu ul.atendimento").removeClass("displayblock");
$("div#contenthead div.topmenu ul.acaosocial").removeClass("displayblock");
$("div#contenthead div.topmenu ul.calendario").removeClass("displayblock");});
$("div#contenthead div.left span.cursos").hover(function() {
$("div#contenthead div.left span.cursos").addClass("colorblue");
$("div#contenthead div.left span.atendimento").removeClass("colorblue");
$("div#contenthead div.left span.acaosocial").removeClass("colorblue");
$("div#contenthead div.left span.calendario").removeClass("colorblue");});
$("div#contenthead div.left span.atendimento").hover(function() {
$("div#contenthead div.left span.cursos").removeClass("colorblue");
$("div#contenthead div.left span.atendimento").addClass("colorblue");
$("div#contenthead div.left span.acaosocial").removeClass("colorblue");
$("div#contenthead div.left span.calendario").removeClass("colorblue");});
$("div#contenthead div.left span.acaosocial").hover(function() {
$("div#contenthead div.left span.cursos").removeClass("colorblue");
$("div#contenthead div.left span.atendimento").removeClass("colorblue");
$("div#contenthead div.left span.acaosocial").addClass("colorblue");
$("div#contenthead div.left span.calendario").removeClass("colorblue");});
$("div#contenthead div.left span.calendario").hover(function() {
$("div#contenthead div.left span.cursos").removeClass("colorblue");
$("div#contenthead div.left span.atendimento").removeClass("colorblue");
$("div#contenthead div.left span.acaosocial").removeClass("colorblue");
$("div#contenthead div.left span.calendario").addClass("colorblue");});
$("div#contenthead div.right span.login").hover(function() {
$("div#contenthead div.left span.cursos").removeClass("colorblue");
$("div#contenthead div.left span.atendimento").removeClass("colorblue");
$("div#contenthead div.left span.acaosocial").removeClass("colorblue");
$("div#contenthead div.left span.calendario").removeClass("colorblue");});
</script>
It serves to display elements outside the parent div using hovers in distinct elements changing color and visibility.
Regarding size, @fernandomondo’s solution is the best, it makes the script very small and simple to edit, very useful, but @tobymosque touched on a subject that I am very valuable, weight for the end user, even if his is bigger, which of the two would be lighter? has some way of calculating script weight?
puts a print of what happens on the screen when Hover... might just solve css.
– Marcelo Bonus
Minifica it :)
– Renan Gomes