como hacer esto?

[congrio7]

quiero que salga el nombre del color del cuadrado por el que pasas el raton, como se ve en la imagen.
(((he puesto yellowpink por ponerlo, como veis en el codigo, pero logicamente lo que quiero es que cambie ese nombre segun voy pasando el raton por los colores))))



Aqui parte del codigo:

div{
width:30px;
height:30px;
float:left;
margin:1px;
}
.nombrecolor{
visibility:hidden;
}
div:hover~.nombrecolor{
visibility:visible;
color:red;
margin-left:5px;
margin-top:5px;
}


{html}
20 divs seguidos........iv><div class="maroon"></div><span class="nombrecolor">yellowpink</span>

[joseoliveras]

Primero debes incluir el span en el div.

<div><span>marron</span></div>

La CSS podría ser así


div{
position:relative;
width:50px;
height:50px;
background:brown;
cursor:pointer;
}
div span{
position:absolute;
top:60px;
left:0;
display:none;
}
​div:hover span{display:block; }

También puedes hacerlo con atributos del div como rel=""
http://css-tricks.com/attribute-selectors/

[congrio7]

Iniciado por joseoliveras

Primero debes incluir el span en el div.

<div><span>marron</span></div>

La CSS podría ser así


div{
position:relative;
width:50px;
height:50px;
background:brown;
cursor:pointer;
}
div span{
position:absolute;
top:60px;
left:0;
display:none;
}
​div:hover span{display:block; }

También puedes hacerlo con atributos del div como rel=""
http://css-tricks.com/attribute-selectors/

Ok. gracias, pero veo 2 defectos ahi:

el nombre del color sale debajo de cada div, no todos en el mismo sitio.

y se usan muchos span, mucho codigo (son cientos de div).

[joseoliveras]

Pensaba que debían salir debajo de cada color.

Realmente la manera de hacerlo de la manera más correcta sería con listas, ya que en realidad son listas de colores. Entonces la posición relativa es en el <ul>. Si no te gusta lo del <span> mirate el link de abajo que hace referencia a los atributos "rel".

[williamhpf]

Para ahorrarte codigo, si los colores siempre son los mismos.
Creas una imagen como la que muestras aqui y luego creas un mapa de imagen, con coordenadas no se bien si se llama asi, entonces a medida que pasas el mouse muestras el nombre que quieras, de todas formas en codigo, siempre necesitaras un enlace para cada color.
En flash supongo que tambien puedes hacer algo parecido, siempre hablando de ahorrar codigo.
Para hacerlo, que es tu pregunta, como dice joseoliveras seria lo mas logico.

Saludos