CSS - necesito que un hover en el li me active un onmouseover

 
Vista:
Imágen de perfil de PATRICIA
Val: 8
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por PATRICIA (5 intervenciones) el 23/04/2018 21:04:38
Buenas tardes, estoy modificando una web y queria colocarle al lado de cada menu, un signo + a los li que llevaran a un submenu, y cuando hago hover en ese li o continuo con hover sobre el submenu, la imagen + cambie por -
con el codigo que fui logrando, la imagen cambia unicamente cuando hago onmouseover sobre la imagen misma, pero quiero que cambie cuando tengo el raton posicionado sobre el li, y que continue cambiada cuando sigo enel submenu de es li.... se entiende?.
No puede ser algo para todos los li, ya que hay algunos que no tienen submenu. sólo para los class="active"
Espero que alguien pueda darme una mano, desde ya muchas gracias, estuve revisando este foro por dias, y no consegui o no supe encontrar una solución.
tambien intenté relentizar el submenu, pero solo consegui demorar el cambio de color :-(
Desde ya muchas gracias


les
paso el codigo del menu
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/mnu.css" rel="stylesheet" type="text/css">
<link href="css/header.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="main">
 
 
              <nav class="menu">
	<ul>
		<li><a href="">Inicio</a></li>
 
		<li><a href="" class="active">Sellos<img onmouseout="this.src='imag/suma.png'"
onmouseover="this.src='imag/resta.png'"
src="imag/suma.png" width="14" height="14">
 
 
		</a>
 
			<nav class="submenu">
				<a href="">Formato Chico</a>
				<a href="">formato Grande</a>
			</nav>
		</li>
		<li>
			<a href="">Filigranas</a></li>
		<li><a href="" class="active">Papeles  <img onmouseout="this.src='imag/suma.png'"
onmouseover="this.src='imag/resta.png'"
src="imag/suma.png" width="14" height="14"> </a>
			<nav class="submenu">
				<a href="">Tipos de Papeles</a>
				<a href="">Materiales y Tips</a>
				<a href="">Nomenclatura de la Obra</a>
				<a href="">Nomenclatura de distintos Autores</a>
			</nav>
		</li>
 
		<li><a href="" class="active">Impresiones <img onmouseout="this.src='imag/suma.png'"
onmouseover="this.src='imag/resta.png'"
src="imag/suma.png" width="14" height="14"> </a>
			<nav class="submenu">
				<a href="">Offset</a>
				<a href="">Tipográfica</a>
			</nav>
		</li>
 
		<li><a href="" class="active" >Sobrecargas <img onmouseout="this.src='imag/suma.png'"
onmouseover="this.src='imag/resta.png'"
src="imag/suma.png" width="14" height="14"> </a>
			<nav class="submenu">
				<a href="">Oficiales</a>
				<a href="">Ministeriales</a>
			</nav>
		</li>
 
		<li >
			<a href="">Perforados</a></li>
 
			<li><a href="" class="active">Listados<img onmouseout="this.src='imag/suma.png'"
onmouseover="this.src='imag/resta.png'"
src="imag/suma.png" width="14" height="14"> </a>
			<nav class="submenu">
				<a href="">Consideraciones</a>
				<a href="">Por Catálogo M.T.</a>
				<a href="">Por Catálogo G.J.</a>
				<a href="">Por Catálogo Gz</a>
				<a href="">Por Viñeta</a>
				<a href="">Por Papeles</a>
			</nav>
		</li>
	</ul>
</nav>
 
 
 
	</div>
 
</body>
</html>


codico css
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
.menu {
 
	background: #009cde; 
	margin-bottom: 80px;
	width: 95%;
	border-radius: 9px;
	font-family: 'Open Sans', arial;
 
}
 
 
.menu ul {
	display: flex;
	justify-content: space-between;
	height:40px;
		}
.menu li {
	position: relative;
	flex:1;
	display: flex;
	justify-content:center;
	align-items: center;
	text-align:center;
	border-radius: 9px;
 
	}
 
.menu a {
	position: relative;
	display: block;
	color: #fff; 
	text-decoration: none;
	border-radius: 15px;
	font-size: 15px;}
 
.submenu {
		display: none;
		position: absolute;
		left: 0;
		top: 40px;
		width: 100%;
		background: #000;
		border-radius: 10px;
		}
 
.submenu li {
	position: absolute;
		background: #4E94AB;
		width: 100%;
		margin-left: -70%;
 
}
.submenu a {
		display: flex;
		justify-content:center;
		align-items: center;
		height: 40px;
		padding-right: 0px ;
		background:  #000;
		font-size: 12px;
				}
 
.menu li:hover .submenu {
		 display:block;
 
 
 
 
		 }
.menu li:hover {
     background:#000;
	border-radius: 15px;
	transition: 0.8s;
 
 
    }
 
 
 
.submenu a:hover  {
	background: #B33624;
	border-radius: 15px;
	transition: 0.8s;
 
}
 
menu ul{
	list-style-type:none;
}
#menu>ul>li{
	float: left;
	margin: 5px;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por juan jose (54 intervenciones) el 23/04/2018 22:52:18
dos consultas, aunque ahora lo mirare, tienes enlazado el html con dos css, abajo el codigo, es el codigo de ambas?. por otro lado, no se si realemente una de ellas esta enlazada, o es que se llama mnu, igual no te esta funcionando por que el nombre del css es menu.css, pero no lo se.

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de PATRICIA SILVANA
Val: 8
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por PATRICIA SILVANA (5 intervenciones) el 23/04/2018 23:02:37
Juan Jose, primero gracias por responder, mnu.css es el nombre del css que me maneja lo referido al menu...el header.css maneja otras partes de la pagina, lo que pasa es que recorte el codigo de la pagina y arme una nueva solo con lo que necesitaba para que me entendieran y no poner tanto codigo,,,,, (menos es mas)..
te repito, la imagen cambia, pero solo cuando paso especificamente sobre la imagen, como el menu cambia de color cuando se hace un hover, necesito que me cambie al bendito (-) cuando toco el li y no que tenga que tambien irme a la pequeña imagen de 14px. y como el cambio de color es contrastante queda feo el signo mas en celeste con el fondo negro...y ademas, no es lo que busco.....
espero haberte clarificado un poco mi problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por juan jose (54 intervenciones) el 24/04/2018 04:12:37
si te entendi bien, creo que es esto. las imagenes sean bonitas o feas, para el codigo da igual, porque despues se pone cualquiera.

C9C
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de PATRICIA
Val: 8
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por PATRICIA (5 intervenciones) el 24/04/2018 13:11:55
Juan José:......TE AMOOOOOOO, si, eso es lo que buscaba, ahora miro el codigo para intentar darme cuenta en que me estaba equivocando o que me faltaba........
es mas.... no habia pensado enponerle la imagen tambien a los submenu..... pero me gusta como queda......amo esta web de ayuda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por xve (489 intervenciones) el 24/04/2018 15:00:16
Excelente Juan Jose!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de PATRICIA
Val: 8
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por PATRICIA (5 intervenciones) el 24/04/2018 15:21:47
siii. igualmente le hice modificaciones, pero me simplifico muchisimo el css, el que no sabe redunda en codigo. el que sabe simplifica.
le quite las imagenes a los menu que no tenian submenu..volvi al mi li.active
le saque las imagenes a los submenues, ya que la finalidad del mas o menos era para indicar que se habia otras opciones debajo....
pero me saco de un brete en el que estaba hace 4 dias....

1


ahora, solo porque soy molesta...
es posible que las imagenes queden a la derecha del menu???

estoy intentando y buscando en todos los foros
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por juan jose (54 intervenciones) el 24/04/2018 16:11:23
941


Tienes dos formas te adjunto el zip, por que es importante el orden del hover de la clase y el li sin ella, para que funcione y te digo digo las dos posibilidades que hay.

1. situacion por porcentaje dentro del li



1
2
3
4
5
6
7
.desplegable{
	background:url("mas.png") no-repeat;
        background-position:100% 50%; /* horizontal - vertical */
 
}
 
}

1. situacion direccion dentro del li



1
2
3
4
5
6
.desplegable{
	background:url("mas.png") no-repeat;
        background-position: right center;
}
 
}

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de PATRICIA
Val: 8
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por PATRICIA (5 intervenciones) el 24/04/2018 16:20:59
sos un genio....
yo la pagina ya la tengo armada," http://proceres1.filateliamda.com.ar/ " pero ahora la quiero hacer responsive, y como esa pagina que esta en la web fue una modificiacion tosca de otra para que sea del mismo estilo....no es que me copie por copiarme, el foro en el que participo ya tenia un mercadito interno con este estilo, y queria que fuera del mismo estilo para que quede mejor.... y hay mucho codigo que no se que corno es,
por eso..... muchisimas gracias.... una vez que termine con los modelos, podre cambiar todo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 196
Bronce
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

necesito que un hover en el li me active un onmouseover

Publicado por juan jose (54 intervenciones) el 24/04/2018 16:48:51
te cuento, la pagina es responsive, es un wordpress que tiene bootstrap, el problema es las medidas, es decir, hay muchas cosas que debes de trabajar con % en vez de con pixel, por ejemplos las tablas, saca el inspector en chrome y juega con ello puedes hacer moficiaciones que realmente no se hacen por que solo modificas sobre el terreno, no en el codigo real

9D4

asi se ve ahora, fijate ahora con dos cambios

1FA


debes de calcular la mayoria de las cosas en % asi se adaptan a cualquier pantalla

fijate en esta



debes ademas de calcular los padding y demas asi te quedara bien
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar