En CSS, ¿es posible que cuando transfiero un elemento, haga visible otro elemento? Tengo un ícono, y cuando alguien pasa sobre él, quiero que haga visible un elemento de texto que describa lo que hace el ícono.CSS: alternar un elemento y hacer que otro elemento sea visible
Respuesta
Aquí hay una información sobre herramientas solo CSS que uso todo el tiempo :) Funciona muy bien, incluso en IE.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Espero que ayude.
¡seguro que lo es!
.me:hover span { display: block; }
Si desea mostrar un elemento que no es un hijo del elemento flotaba puede que tenga que usar javascript
acuerdo con la recomendación de JavaScript. Específicamente jQuery es fácil y más apropiado para la lógica del comportamiento de la página. Creo que CSS debería ser solo look/feel/style ... Javascript debería ser si tu evento y tu lógica de comportamiento fueran los mismos.
Puede tomar niño-elementos visibles colocando el cursor sobre el padre (como Hunter suggests), o los hermanos:
span:hover + span {display: block; }
tal vez hay algunos leves problemas de compatibilidad entre navegadores, pero con un tipo de documento válido creo IE7 + está bien con los selectores hermanos (aunque no he intentado probar esa teoría).
He aquí un pequeño ejemplo abofeteado juntos que no funciona en IE ...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
Pero lo que realmente debería usar jQuery.
- 1. Haz que un div sea visible y otro invisible
- 2. ¿Puedo hacer que un elemento sea invisible para los ahorcables?
- 3. ¿Puedo hacer que un elemento ListView no sea seleccionable?
- 4. ¿Cómo hacer que un elemento HTML no sea enfocable?
- 5. JavaScript/HTML - Alternar visibilidad (lo que automáticamente hace que un elemento div se oculte cuando se muestra otro)
- 6. Hacer que DIV sea invisible en CSS y JavaScript
- 7. ¿Cómo uso una casilla de verificación para alternar otro elemento?
- 8. CSS seleccionar varios descendientes de otro elemento
- 9. jQuery alternar y SI visible
- 10. ¿Se puede aplicar un efecto de desplazamiento de CSS a un elemento que no sea secundario del elemento de desplazamiento?
- 11. CSS: coloque el cursor sobre otro elemento?
- 12. CSS cómo seleccionar primer elemento que ocurre después de otro elemento
- 13. CSS: ¿Cómo la configuración de un margen derecho hace que el elemento primario sea visible en este ejemplo?
- 14. Coloque un elemento relativo a otro en CSS
- 15. Hacer css: el elemento emergente solo afecta al elemento padre
- 16. Hacer un elemento de la lista que se puede hacer clic (HTML/CSS)
- 17. cómo colocar un elemento encima de otro elemento?
- 18. Si el elemento está sobre otro elemento?
- 19. pitón LXML anexar elemento tras otro elemento
- 20. CSS/JavaScript: Elemento elemento superior z-superior/elemento modal superior
- 21. Seleccionar elemento específico antes de que otro elemento
- 22. Elemento XPath que contiene un atributo y el elemento primario de su padre contiene otro atributo
- 23. jQuery: Ocultar elemento al hacer clic en cualquier otro lugar aparte del elemento
- 24. haz que el ancho sea del mismo tamaño que otro elemento html
- 25. ¿Cómo hacer que un elemento en un editor TinyMCE sea tratado como un solo elemento no editable?
- 26. Detectar si un elemento es realmente visible
- 27. registrando clics en un elemento que está debajo de otro elemento
- 28. Hacer que el elemento secundario aparezca fuera del elemento principal
- 29. Selectores de CSS Seleccionar un elemento solo cuando está dentro de otro elemento
- 30. Selección de un elemento que tiene otro elemento como hijo directo
aquí está el violín http://jsfiddle.net/c0owz9qb/ – suhailvs