body { color:#333; font-family:'Terminal Dosis',Arial,sans-serif; font-size:13px; } a { color:#fff; text-decoration:none; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } .menu { padding:0; margin:20px auto; width:500px; } .menu li { width:500px; height:100px; overflow:hidden; display:block; background:#fff; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); box-shadow:1px 1px 2px rgba(0,0,0,0.2); margin-bottom:4px; border-left:10px solid #000; -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .menu li:last-child { margin-bottom:0px; } .menu li a { text-align:left; display:block; width:100%; height:100%; color:#333; position:relative; } .content { position:absolute; } .main { font-size:30px; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear; } .sub { font-size:14px; color:#666; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear; } .menu li:hover { border-color:#fff004; background:#000; } .menu li:hover .main { color:#fff004; font-size:14px; } .menu li:hover .sub { color:#fff; font-size:30px; }
鼠标滑入时,放入文字的容器此时改变为黄色色块,并且h3号字体放大h1号字体,h1号字体此时缩小h3号字体