1 body {2 font-family: sans-serif;3 max-width: 800px;4 margin: 0 auto;5 }6 7 pre {8 display: block;9 border: dashed silver 1px;10 padding: 4px;11 overflow: hidden;12 }13 14 blockquote {15 border: solid silver 1px;16 padding: 16px 16px 16px 48px;17 font-style: oblique;18 background-color: #F4F4F4;19 margin: 0;20 }21 22 .comentario {23 display: inline-block;24 margin-left: 4px;25 position: absolute;26 max-width: 600px;27 border-radius: 3px;28 overflow: hidden;29 30 transition: all 0.3s ease;31 }32 33 .comentario-ver {34 font-size: 10px;35 padding: 3px;36 cursor: pointer;37 background-color: silver;38 color: white;39 width: auto;40 min-width: 90px;41 text-align: center;42 43 transition: all 0.3s ease;44 }45 46 .comentario-texto {47 display: none;48 padding: 8px;49 border: solid orange 1px;50 max-height: 400px;51 overflow-y: auto;52 }53 54 .comentario:hover {55 z-index: 999;56 box-shadow: 2px 2px 2px rgba(0,0,0,0.4);57 }58 59 .comentario:hover .comentario-ver {60 width: 100%;61 background-color: orange;62 }63 64 .comentario:hover .comentario-texto {65 display: block;66 background-color: rgba(255,255,255, 0.85);67 68 }69 Enlace
El enlace para compartir es: