A: PROBLEMA DE POSTION DE FONDO DE FUERZA -- ss campo con hover campo con css-sprites campo con background-position camp Relacionados El problema

a:hover background-postition problem


3
vote

problema

Español

Por alguna razón, no estoy totalmente seguro de por qué, pero lo siguiente no está funcionando. La posición de fondo simplemente permanece igual en el flujo. No puedo entender por qué. Podría hacerlo de otra manera, pero me gustaría intentar llegar al final de por qué no funciona.

  #nav a:link, #nav a:visited {     background:url(../img/nav-sprite.png) no-repeat;     display:block;     float:left;     height:200px;     padding:10px;     text-indent:-9999px;     border:solid 1px red; }      #nav a#home {         background-position:-10px 0px;         width:30px;     }     #nav a#about-us {         background-position:-85px 0px;         width:45px;     }  #nav a:hover    {     background-position:1px -15px; }   

¿Alguien sabe qué podría estar causando esto?

¡Gracias de antemano!

ryan

Original en ingles

For some reason, I am not entirely sure why, but the following is not working. The background position simply stays the same on hover. I cannot figure out why. I could do it another way, but I would like to try and get to the bottom of why it does not work.

#nav a:link, #nav a:visited {     background:url(../img/nav-sprite.png) no-repeat;     display:block;     float:left;     height:200px;     padding:10px;     text-indent:-9999px;     border:solid 1px red; }      #nav a#home {         background-position:-10px 0px;         width:30px;     }     #nav a#about-us {         background-position:-85px 0px;         width:45px;     }  #nav a:hover    {     background-position:1px -15px; } 

Does anybody know what could be causing this?

Thanks in advance!

Ryan

           
 
 

Lista de respuestas

7
 
vote
vote
La mejor respuesta
 

Los selectores de identificación tienen prioridad sobre los selectores de pseudo-clase ..

Por lo tanto, la regla # no se exagerará mediante una regla #nav a:hover1 ..

¡Utilice la Directiva importante

  #nav a:hover    {     background-position:1px -15px!important; }   

o hacer que la regla sea más específica

  #nav a#home:hover, #nav a#about-us:hover    {     background-position:1px -15px; }   
 

The ID selectors have priority over the pseudo-class selectors..

thus the # rule will not be overriden by a : rule..

either use the !important directive

#nav a:hover    {     background-position:1px -15px!important; } 

or make the rule more specific

#nav a#home:hover, #nav a#about-us:hover    {     background-position:1px -15px; } 
 
 
   
   
3
 
vote

#nav a#home y #nav a#about-us Tienen una especificidad más alta que #nav a:hover (ID & GT; Pseudo-Clase), por lo que no se aplica este último. #nav a#home:hover y #nav a#about-us:hover funcionaría aquí.

consulte la cascada .

 

#nav a#home and #nav a#about-us have higher specificity than #nav a:hover (id > pseudo-class), so the latter is never applied. #nav a#home:hover and #nav a#about-us:hover would work here.

See the cascade.

 
 
 
 
1
 
vote

Intenta esto:

  #nav a#home:hover, #nav a#about-us:hover    {     background-position:1px -15px; }   
 

Try this:

#nav a#home:hover, #nav a#about-us:hover    {     background-position:1px -15px; } 
 
 
0
 
vote

Sé que ya no es relevante, pero si alguien llegará aquí, así que hay una opción más:

Cambiar las identificaciones a las clases. Intento de :0 Utilice :111 . Ahora cambie sus estilos desde :2 a :3 y funcionará.

Código completo:

  :4  
 

I know it's not relevant anymore but if someone will get here so there is one more option:

Change the Ids to Classes. Intead of <a id="home"> use <a class="home">. Now change your styles from a#home to a.home and it will work.

Full code:

<div id="nav">     <a href="#" class="home">Home</a>     <a href="#" class="about-us">About Us</a> </div>  <style>         #nav a:link, #nav a:visited         {             background: url('smile-icon.jpg') no-repeat;             display: block;             float: left;             height: 140px;             padding: 10px;             text-indent: -9999px;             border: solid 1px red;         }          #nav a.home         {             background-position: -10px 0px;             width: 30px;         }          #nav a.about-us         {             background-position: -85px 0px;             width: 45px;         }          #nav a:hover         {             background-position: 1px -15px;         }     </style> 
 
 

Relacionados problema

87  ¿Es la posición de fondo-X (Posición de fondo-Y) una propiedad estándar W3C CSS?  ( Is background position x background position y a standard w3c css property ) 
Estoy preocupado por background-position-x y background-position-y . Gecko (Firefox) y Presto (Opera) no los apoyan, pero WebKit (Chrome, Safari) hace ... ...

-1  Fondo de apilamiento: Cómo hacerlo visible debajo de otro div  ( Stacking background how to make it visible under another div ) 
Tengo dos divisiones de columnas y estoy aplicando un fondo grande al segundo div, y lo cambié con la posición de fondo a la izquierda. Me gustaría que siguie...

1  JQuery. Posición de fondo  ( Jquery animate background position ) 
¿Cómo puedo animar la propiedad de posición de fondo usando la función animada de jquery sin usar un complemento? Intenté volver a volver a 1.4.4 cuando se ad...

2  Coloque la imagen del centro de fondo del fondo con un poco de desplazamiento  ( Position background image center bottom with some offset ) 
Me gustaría posicionar al fondo de una imagen de fondo, pero darle un desplazamiento vertical. vamos a decir de la misma manera que podemos hacer: .img...

0  La imagen de fondo de WordPress no responde en dispositivos móviles  ( Wordpress background image is not responsive in mobile devices ) 
Mi página web es ( https://www.yahoonewsz.com ) y he subió una imagen en la carpeta Public_HTML en el servidor. He usado el siguiente código para el fondo ...

3  CSS: Posición de fondo + repetición = no funciona  ( Css background position repeat not working ) 
¿Alguien encuentra este tipo de problema con CSS antes? Tengo un encabezado que está configurado en 100% de ancho, con una imagen en el lado izquierdo (500p...

1  CSS / JavaScript ¿Cómo hago esta película de posición de fondo en Firefox como lo hace en IE7 +?  ( Css javascript how do i make this background position movie in firefox like it d ) 
create_raw_data owner_id temperature [--save] 2 Este es el sitio en cuestión: www.theyorine.com ...

3  ¿Cómo puedo tener un fondo fijo en un div?  ( How can i have fixed background in a div ) 
Tengo un sitio, y en una de mis páginas uso un div que se parece a un editor. Puedo tener un fondo en este div y el contenido por encima de él. Quiero este fo...

0  Posición de fondo Desplazamiento de abajo: comportamiento opuesto en cromo y firefox  ( Background position offset from bottom opposite behaviour in chrome and firefox ) 
Encontré un resultado opuesto en Firefox y Chrome al hacer un fondo degradado con el conjunto de compensación. Aquí mi código CSS: <p>111 La idea es a...

0  Posición de fondo de IE8 en: Hover no se mueve el archivo  ( Ie8 background position on hover not moving file ) 
Estoy usando el método de posición de fondo para cambiar una imagen cuando me cierre sobre él. Esto está funcionando bien para mí en FF, Chrome y Safari, pero...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos