1 body {2 font-family: sans-serif;3 max-width: 800px;4 margin: 32px 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 /************************************ index ************************************/33 .index {34 border: solid silver 1px;35 background: #F5F5F5;36 padding: 16px;37 }38 39 .index ol {40 list-style-type: none;41 padding: 0;42 margin: 0;43 }44 45 .index ol ol {46 padding-left: 32px;47 }48 49 50 blockquote {51 border: solid silver 1px;52 padding: 16px 16px 16px 48px;53 font-style: oblique;54 background-color: #F4F4F4;55 margin: 0;56 }57 58 .comentario {59 display: inline-block;60 margin-left: 4px;61 position: absolute;62 max-width: 600px;63 border-radius: 3px;64 overflow: hidden;65 66 transition: all 0.3s ease;67 }68 69 .comentario-ver {70 font-size: 10px;71 padding: 3px;72 cursor: pointer;73 background-color: silver;74 color: white;75 width: auto;76 min-width: 90px;77 text-align: center;78 79 transition: all 0.3s ease;80 }81 82 .comentario-texto {83 display: none;84 padding: 8px;85 border: solid orange 1px;86 max-height: 400px;87 overflow-y: auto;88 }89 90 .comentario:hover {91 z-index: 999;92 box-shadow: 2px 2px 2px rgba(0,0,0,0.4);93 }94 95 .comentario:hover .comentario-ver {96 width: 100%;97 background-color: orange;98 }99 100 .comentario:hover .comentario-texto {101 display: block;102 background-color: rgba(255,255,255, 0.85);103 104 }105 106 107 108 Enlace
El enlace para compartir es: