No se puede cambiar el color de fondo de otro elemento en el vuelo estacionario

Creé una lista con elementos. Quiero que el color de fondo de #tags_image cambie a amarillo cuando coloque el elemento 1, a azul cuando pase el elemento 2, etc. Este es mi código HTML:

 
  • Familie
  • Uncharted

Y mi CSS:

 #tags { padding: 4px; display: inline-block; } #tags_image { display: inline-block; margin-left: 7.5%; width: 20%; background-color: red; } #tags li { display: inline; cursor: pointer; } #tags #tag1:hover + #tags_image { background-color: yellow; } #tags #tag2:hover + #tags_image { background-color: blue; } 

Sin embargo, esto no parece funcionar. El problema no está en el atributo: hover, porque puedo cambiar los elementos de tag1 y tag2 de esta manera, pero no puedo cambiar los elementos de #tags_image .

¿Cómo puedo arreglar esto? ¡Cualquier ayuda sería muy apreciada!

Puede usar jQuery para manipular esto.

 $("#tag1").hover(function(){ $("#tags_image").css('background','yellow'); }); $("#tag2").hover(function(){ $("#tags_image").css('background','blue'); }); 

CMIIW ~