Animacion
Publicado por eugenio (2 intervenciones) el 08/12/2013 03:50:58
Bueno, antes que nada, soy completamente un noob en el tema, dicho esto les dejo el codigo, el problema es que mi animacion no funciona
el HTML
Bueno quiero lograr que cuando el usuario posicione el mouse sobre uno de los hipervinculos de arriba, el mismo, cambie a color negro.
les dejo el css por si sirve de algo
Se agradecen criticas y comentarios en cuatro a los 3 codigos :D hace un mes aproximadamente empeze con html aun me falta mucho que aprender.
(DIsculpen por el css completamente desordenado.)
1
2
3
4
5
$(document).ready(function(){
$('#nav').mouseenter(function(){
$('.menuprincipal').animate({color:"#fff"}, 1000);
});
});
el HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
<title>Ink Web, Diseño, Maqueteado, Porgramacion, Inspiracion, Desarrollo Web.</title>
<meta charset= "utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" rel ="javascript" src="script.js"></script>
</head>
<body>
<div id="contenedor">
<div id="header">
<div id="nav">
<a href="#"><span class="menuprincipal" >Home</span></a>
<a href="#"><span class="menuprincipal" >Nosotros</span></a>
<a href="#"><span class="menuprincipal">Contacto</span></a>
</div>
</div><!-- Cierre id="header" -->
<div id="midcont">
<p id="cp">Creativos Profesionales</p>
<h1 id="titulo">Ink Web</h1>
<p id="slogan">Tu empresa, nuestra empresa</p>
<p id="crecer">Nosotros crecemos si Ud. crece, contamos con los mejores profesionales en materias de Diseño, con el objetivo de hacer que su web soñada, realidad, para que tu PyME ó Empresa cresca!</p>
</div>
</div><!-- Cierre id="contenedor" -->
</body>
</html>
Bueno quiero lograr que cuando el usuario posicione el mouse sobre uno de los hipervinculos de arriba, el mismo, cambie a color negro.
les dejo el css por si sirve de algo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
* {margin: 0; padding: 0;}
body {background-color: #4A0025; min-width: 100%; min-height: 100%; font-family: arial;}
div {display: block; margin: 0; padding: 0;}
a:link, a:visited, a:hover {text-decoration: none !important;}
#header{
height: 2em;width: 100%;
margin-bottom: 1em;
}#nav{
display: block;text-align: center;
margin-right: auto;
margin-left: auto;
}.menuprincipal{
font-size: 1.5em;
display: inline-block;
margin-left: 1em;
text-decoration: none;
color:#E6CCFF;
}#titulo {
font-size: 10em;
color: #0F0F0A;
text-align: center;
display: block;height: 100%;
text-shadow:
1px 1px 5px #4D2B3D,
2px 2px 5px #4D2B3D,
3px 3px 5px #391427,
4px 4px 5px #391427,
5px 5px 5px #36001B,
6px 6px 5px #36001B,
7px 7px 5px #260013,
-1px -1px 0 #4D2B3D;
}#contenedor {
width: 800px; margin: auto;margin-top: 8em;
margin-bottom: 8em;
}#slogan{
font-size: 1.3em;
float: right; display: block;margin-top: -1.3em;
color: #B6859D;
text-shadow:
3px 3px 5px #391427,
4px 4px 5px #391427,
5px 5px 5px #36001B,
6px 6px 5px #36001B,
7px 7px 5px #260013;
}#crecer{
font-size: 1.1em;
color: #eeeeee;
text-shadow:
1px 1px 5px #4D2B3D,
2px 2px 5px #4D2B3D,
3px 3px 5px #391427,
4px 4px 5px #391427,
5px 5px 5px #36001B,
6px 6px 5px #36001B,
7px 7px 5px #260013,
-1px -1px 0 #4D2B3D;
}#midcont{
max-width: 39em;
margin:auto;}#cp{
color: #eeeeee;
font-size: 2.4em;
margin-bottom: -1em;
display: block;text-shadow: 1px 1px 3px black;
margin-left: .3em;
}Se agradecen criticas y comentarios en cuatro a los 3 codigos :D hace un mes aproximadamente empeze con html aun me falta mucho que aprender.
(DIsculpen por el css completamente desordenado.)
Valora esta pregunta
0
