Los amigos que navegan con frecuencia por Internet alguna vez han notado que el mouse en algunos sitios web no tiene la forma de una flecha diagonal hacia arriba, sino una cruz, una flecha hacia la izquierda, un signo de interrogación, etc. Cuando desee que el mouse muestre diferentes formas en diferentes ubicaciones de la página web para reflejar diferentes áreas funcionales; cuando desee que su sitio web refleje un estilo único, considere trabajar en el estilo del mouse. De hecho, los estilos de mouse tienen una amplia gama de usos, entonces, ¿cómo se pueden implementar diferentes estilos de mouse? Inicie Dreamweaver, abra la página web donde desea aplicar el estilo del mouse, seleccione el menú desplegable Texto en la ventana principal y luego seleccione Nuevo en el submenú Estilo CSS. El comando Estilo crea una nueva hoja de estilo. (Nota: si ya existe una hoja de estilo en su página web, puede seleccionar Estilos CSS Editar hoja de estilo para editar la hoja de estilo). Aparecerá el cuadro de diálogo Nuevo estilo. El elemento Tipo tiene tres botones de opción: Crear estilo personalizado, Redefinir etiqueta HTML y Usar selector CSS. Entre ellos, Crear estilo personalizado es un estilo personalizado y el nombre del estilo comienza con un punto. Usar selector CSS es usar el selector CSS, que contiene cuatro estilos de hipervínculo
a:active/a:hover/a:link/a:visited. ; Redefinir etiqueta HTML es un estilo que define etiquetas del sistema HTML, como abodybr, etc. Supongamos que solo configuramos el estilo del mouse para los hipervínculos en esta página. Aquí, seleccione la etiqueta a en la opción Redefinir etiqueta HTML. Seleccione Sólo este documento para el elemento Definir a continuación. Haga clic en el botón Aceptar. Aparece la definición de estilo para el cuadro de diálogo y se ingresa la configuración de estilo del hipervínculo. La categoría de la izquierda es la categoría de estilo. No hay explicación para otros elementos aquí. Elegimos el elemento Extensiones. Puede ver el elemento Cursor en el Efecto visual a la derecha, que es el elemento clave para configurar el estilo del mouse. Haga clic en el menú desplegable a la derecha, seleccione el estilo de mouse que necesita y haga clic en el botón Aceptar. Hablemos del significado general de cada estilo.
mano: es una forma de mano familiar.
punto de mira: Tiene forma de cruz, que es el estilo utilizado en la página de inicio de Little Turtle.
texto: Es el estilo cuando se mueve el mouse sobre el texto.
esperar: es el efecto de esperar.
default: Es el efecto predeterminado.
ayuda: es el estilo del mouse con signo de interrogación.
e-resize: es la flecha derecha.
ne-resize: es la flecha que apunta hacia arriba hacia la derecha.
n-resize: es una flecha hacia arriba.
nw-resize: es la flecha que apunta hacia arriba hacia la izquierda.
w-resize: Es un paso de flecha hacia la izquierda.
sw-resize: es la flecha que apunta hacia abajo hacia la izquierda.
s-resize: es una flecha hacia abajo.
se-resize: es la flecha que apunta hacia abajo hacia la derecha.
auto: Es el efecto automático del sistema.
Por supuesto, también puedes aplicar el estilo a otras etiquetas según sea necesario, o simplemente aplicarlo a un determinado párrafo de texto. Si el lector está familiarizado con el código CSS, puede resultar más conveniente escribir el código directamente a mano. En particular, si desea utilizar diferentes estilos de mouse para diferentes ubicaciones o usar diferentes estilos de mouse para diferentes pestañas. Simplemente escribe el estilo directamente en una etiqueta específica.
El método es: <etiqueta estilo=cursor:mouse_style>. Donde etiqueta es el nombre de la etiqueta, mouse_style es el estilo del mouse, como mano/cruz/texto/espera, etc.
Demos un ejemplo específico para profundizar la comprensión de todos sobre la configuración del estilo del mouse.
<span style=cursor:hand> mano: es una forma de mano familiar. </span>
< span style=cursor:crosshair>crosshair: Es una cruz, que es el estilo utilizado en la página de inicio de Little Turtle. </span>
< span style=cursor:text>texto: es el estilo con el que se suele mover el ratón sobre el texto. </span>
< span style=cursor:wait>esperar: es el efecto de esperar. < /span>
< span style=cursor:default>default: es el efecto predeterminado. </span>
< span style=cursor:help>ayuda: es un estilo de mouse con un signo de interrogación. </span>
< span style=cursor:e-resize>e-resize: es una flecha hacia la derecha. </span>
< span style=cursor:ne-resize>ne-resize: es una flecha que apunta hacia arriba, hacia la derecha. </span>
< span style=cursor:n-resize>n-resize: es una flecha hacia arriba. < /span>
< span style=cursor:nw-resize>nw-resize: es una flecha que apunta hacia arriba a la izquierda. </span>
< span style=cursor:w-resize>w-resize: Es un paso de flecha hacia la izquierda. < /span>
< span style=cursor:sw-resize>sw-resize: es una flecha que apunta hacia abajo, hacia la izquierda. </span>
< span style=cursor:s-resize>s-resize: es una flecha hacia abajo. </span>
< span style=cursor:se-resize>se-resize: es una flecha que apunta hacia abajo hacia la derecha. </span>
< span style=cursor:auto>auto: es el efecto automático del sistema. </span>
Copie el código anterior en su página web y presione F12 para obtener una vista previa. Mueva el mouse sobre el texto correspondiente y vea qué sucede con el mouse. ¿Aparece en el estilo correspondiente?