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