Estoy tratando de aplicar el color de fondo cuando el mouse de un usuario pasa el elemento cuyo nombre de clase es "reMode_hover".

Pero no quiero cambiar de color si el elemento también tiene"reMode_selected"

Nota: Solo puedo usar CSS, no JavaScript porque estoy trabajando en algún tipo de entorno limitado.

Para aclarar, mi objetivo es colorear el primer elemento al pasar el mouse pero no el segundo elemento.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Lo intenté a continuación con la esperanza de que la primera definición funcione, pero no lo es. ¿Qué estoy haciendo mal?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

Una forma es usar el selector de clase múltiple (sin espacio, ya que es el selector descendiente):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

En los navegadores modernos puedes hacer:

.reMode_hover:not(.reMode_selected):hover{}

Consulte http://caniuse.com/css-sel3 para obtener información de compatibilidad.

Método 1

El problema con su código es que está seleccionando el .remode_hoverque es descendiente de .remode_selected. Entonces, la primera parte para que su código funcione correctamente es eliminar ese espacio

.reMode_selected.reMode_hover:hover

Luego, para que el estilo no funcione, debe anular el estilo establecido por :hover. En otras palabras, debe contrarrestar la background-colorpropiedad. Entonces el código final será

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

Violín

Método 2

Un método alternativo sería usar :not(), como lo han dicho otros. Esto devolverá cualquier elemento que no tenga la clase o propiedad establecida dentro del paréntesis. En este caso, lo pondrías .remode_selectedallí. Esto apuntará a todos los elementos que no tienen una clase de.remode_selected

Violín

Sin embargo, no recomendaría este método, debido al hecho de que se introdujo en CSS3, por lo que el soporte del navegador no es ideal.

Método 3

Un tercer método sería usar jQuery. Puede apuntar al .not()selector, que sería similar al uso :not()en CSS, pero con un soporte de navegador mucho mejor

Violín