No me funciona el :hover

Hola Álvaro, Muchas gracias por los videos tan magnificos. Tengo una pega no me funciona el :hover Yo uso Visual Studio Code con extension Open With Server, necesito algún otro programa ? Muchas gracias de antemano.

Soy un título

Item 1
Item 2
Item 3
Item 4
- Subitem
- Subitem
- Subitem
- Subitem

</ul>

body { font-size: 2em ; } li > ul { display: none; } /* Esta pseudo clase la dará más adelante lo que indica es que es un evento cuando pasamos el ratón por encima */

li :hover ul { display: block; }

4:15 a. m. · 10 mar. 2020

EV

Enrique Vecino

@enriquevecino

No me funciona el :hover

Hola Álvaro, Muchas gracias por los videos tan magnificos. Tengo una pega no me funciona el :hover Yo uso Visual Studio Code con extension Open With Server, necesito algún otro programa ? Muchas gracias de antemano.

Soy un título

Item 1
Item 2
Item 3
Item 4
- Subitem
- Subitem
- Subitem
- Subitem

</ul>

body { font-size: 2em ; } li > ul { display: none; } /* Esta pseudo clase la dará más adelante lo que indica es que es un evento cuando pasamos el ratón por encima */

li :hover ul { display: block; }

4:15 a. m. · 10 mar. 2020

EV

Enrique Vecino

@enriquevecino

No me funciona el :hover

Hola Álvaro, Muchas gracias por los videos tan magnificos. Tengo una pega no me funciona el :hover Yo uso Visual Studio Code con extension Open With Server, necesito algún otro programa ? Muchas gracias de antemano.

Soy un título

Item 1
Item 2
Item 3
Item 4
- Subitem
- Subitem
- Subitem
- Subitem

</ul>

body { font-size: 2em ; } li > ul { display: none; } /* Esta pseudo clase la dará más adelante lo que indica es que es un evento cuando pasamos el ratón por encima */

li :hover ul { display: block; }

4:15 a. m. · 10 mar. 2020

EV

Enrique Vecino

@enriquevecino

No me funciona el :hover

Hola Álvaro, Muchas gracias por los videos tan magnificos. Tengo una pega no me funciona el :hover Yo uso Visual Studio Code con extension Open With Server, necesito algún otro programa ? Muchas gracias de antemano.

Soy un título

Item 1
Item 2
Item 3
Item 4
- Subitem
- Subitem
- Subitem
- Subitem

</ul>

body { font-size: 2em ; } li > ul { display: none; } /* Esta pseudo clase la dará más adelante lo que indica es que es un evento cuando pasamos el ratón por encima */

li :hover ul { display: block; }

4:15 a. m. · 10 mar. 2020

Marcos Gigena @marcosgigena10 mar

Tienes un error en el selector. Al escribir li :hover ul estas diciendo que cuando haces hover en un hijo de li muestre cualquier ul, pero antes le diste demasiada especificidad al decir que todo ul directo de li no se muestre.

Para corregirlo debes respetar la especificidad:

li &gt; ul {
  display: none;
}

li:hover &gt; ul { 
/* No hay espacio entre li y :hover */
  display: block; 
}

Lo más recomendable es siempre usar clases, por ejemplo hacer lo siguiente.

&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;
  Item
  &lt;ul class=&#34;sub-item&#34;&gt;
    &lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;

.sub-item {
  display: none;
}

.item:hover &gt; .sub-item {
  display: block;
}

Starling Mercedes @starlingmercedes9343710 mar

puedes usar transition si quieres hacer efectos de hover mas lindos https://css-tricks.com/almanac/properties/t/transition/

EV

Enrique Vecino

@enriquevecino

No me funciona el :hover

Hola Álvaro, Muchas gracias por los videos tan magnificos. Tengo una pega no me funciona el :hover Yo uso Visual Studio Code con extension Open With Server, necesito algún otro programa ? Muchas gracias de antemano.

Soy un título

Item 1
Item 2
Item 3
Item 4
- Subitem
- Subitem
- Subitem
- Subitem

</ul>

body { font-size: 2em ; } li > ul { display: none; } /* Esta pseudo clase la dará más adelante lo que indica es que es un evento cuando pasamos el ratón por encima */

li :hover ul { display: block; }

4:15 a. m. · 10 mar. 2020

Marcos Gigena @marcosgigena10 mar

Tienes un error en el selector. Al escribir li :hover ul estas diciendo que cuando haces hover en un hijo de li muestre cualquier ul, pero antes le diste demasiada especificidad al decir que todo ul directo de li no se muestre.

Para corregirlo debes respetar la especificidad:

li &gt; ul {
  display: none;
}

li:hover &gt; ul { 
/* No hay espacio entre li y :hover */
  display: block; 
}

Lo más recomendable es siempre usar clases, por ejemplo hacer lo siguiente.

&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;
  Item
  &lt;ul class=&#34;sub-item&#34;&gt;
    &lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;

.sub-item {
  display: none;
}

.item:hover &gt; .sub-item {
  display: block;
}

Starling Mercedes @starlingmercedes9343710 mar

puedes usar transition si quieres hacer efectos de hover mas lindos https://css-tricks.com/almanac/properties/t/transition/

EV

Enrique Vecino

@enriquevecino

No me funciona el :hover

Hola Álvaro, Muchas gracias por los videos tan magnificos. Tengo una pega no me funciona el :hover Yo uso Visual Studio Code con extension Open With Server, necesito algún otro programa ? Muchas gracias de antemano.

Soy un título

Item 1
Item 2
Item 3
Item 4
- Subitem
- Subitem
- Subitem
- Subitem

</ul>

body { font-size: 2em ; } li > ul { display: none; } /* Esta pseudo clase la dará más adelante lo que indica es que es un evento cuando pasamos el ratón por encima */

li :hover ul { display: block; }

4:15 a. m. · 10 mar. 2020

Marcos Gigena @marcosgigena10 mar

Tienes un error en el selector. Al escribir li :hover ul estas diciendo que cuando haces hover en un hijo de li muestre cualquier ul, pero antes le diste demasiada especificidad al decir que todo ul directo de li no se muestre.

Para corregirlo debes respetar la especificidad:

li &gt; ul {
  display: none;
}

li:hover &gt; ul { 
/* No hay espacio entre li y :hover */
  display: block; 
}

Lo más recomendable es siempre usar clases, por ejemplo hacer lo siguiente.

&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;
  Item
  &lt;ul class=&#34;sub-item&#34;&gt;
    &lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;

.sub-item {
  display: none;
}

.item:hover &gt; .sub-item {
  display: block;
}

Starling Mercedes @starlingmercedes9343710 mar

puedes usar transition si quieres hacer efectos de hover mas lindos https://css-tricks.com/almanac/properties/t/transition/

Marcos Gigena @marcosgigena10 mar

Tienes un error en el selector. Al escribir li :hover ul estas diciendo que cuando haces hover en un hijo de li muestre cualquier ul, pero antes le diste demasiada especificidad al decir que todo ul directo de li no se muestre.

Para corregirlo debes respetar la especificidad:

li &gt; ul {
  display: none;
}

li:hover &gt; ul { 
/* No hay espacio entre li y :hover */
  display: block; 
}

Lo más recomendable es siempre usar clases, por ejemplo hacer lo siguiente.

&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;
  Item
  &lt;ul class=&#34;sub-item&#34;&gt;
    &lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;

.sub-item {
  display: none;
}

.item:hover &gt; .sub-item {
  display: block;
}

Starling Mercedes @starlingmercedes9343710 mar

puedes usar transition si quieres hacer efectos de hover mas lindos https://css-tricks.com/almanac/properties/t/transition/

Marcos Gigena @marcosgigena10 mar

Tienes un error en el selector. Al escribir li :hover ul estas diciendo que cuando haces hover en un hijo de li muestre cualquier ul, pero antes le diste demasiada especificidad al decir que todo ul directo de li no se muestre.

Para corregirlo debes respetar la especificidad:

li &gt; ul {
  display: none;
}

li:hover &gt; ul { 
/* No hay espacio entre li y :hover */
  display: block; 
}

Lo más recomendable es siempre usar clases, por ejemplo hacer lo siguiente.

&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;
  Item
  &lt;ul class=&#34;sub-item&#34;&gt;
    &lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;

.sub-item {
  display: none;
}

.item:hover &gt; .sub-item {
  display: block;
}

Starling Mercedes @starlingmercedes9343710 mar

puedes usar transition si quieres hacer efectos de hover mas lindos https://css-tricks.com/almanac/properties/t/transition/

Marcos Gigena @marcosgigena10 mar

Tienes un error en el selector. Al escribir li :hover ul estas diciendo que cuando haces hover en un hijo de li muestre cualquier ul, pero antes le diste demasiada especificidad al decir que todo ul directo de li no se muestre.

Para corregirlo debes respetar la especificidad:

li &gt; ul {
  display: none;
}

li:hover &gt; ul { 
/* No hay espacio entre li y :hover */
  display: block; 
}

Lo más recomendable es siempre usar clases, por ejemplo hacer lo siguiente.

&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
&lt;li class=&#34;item&#34;&gt;
  Item
  &lt;ul class=&#34;sub-item&#34;&gt;
    &lt;li class=&#34;item&#34;&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;

.sub-item {
  display: none;
}

.item:hover &gt; .sub-item {
  display: block;
}

Starling Mercedes @starlingmercedes9343710 mar

puedes usar transition si quieres hacer efectos de hover mas lindos https://css-tricks.com/almanac/properties/t/transition/

Post

No me funciona el :hover

Soy un título

Post

No me funciona el :hover

Soy un título

Post

No me funciona el :hover

Soy un título

Post

No me funciona el :hover

Soy un título

Post

No me funciona el :hover

Soy un título

Post

No me funciona el :hover

Soy un título