Rounded Corner CSS Hover


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <?xml version='1.0' encoding='UTF-8'?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Floating</title>
  7. <style type="text/css">
  8. .content p{
  9. position:relative;
  10. height:100px;
  11. width:400px;
  12. border:1px solid black;
  13. }
  14. .content p span{
  15. position:absolute;
  16. }
  17.  
  18. .content p .span1{
  19. left:0;
  20. top:0;
  21. }
  22.  
  23. .content p .span2{
  24. right:0;
  25. top:0;
  26. }
  27.  
  28. .content p .span3{
  29. left:0;
  30. bottom:0;
  31. }
  32.  
  33. .content p .span4{
  34. right:0;
  35. bottom:0;
  36. }
  37.  
  38. .content p:hover .span1{
  39. background-color:red;
  40. }
  41.  
  42. .content p:hover .span2{
  43. background-color:blue;
  44. }
  45.  
  46. .content p:hover .span3{
  47. background-color:green;
  48. }
  49.  
  50. .content p:hover .span4{
  51. background-color:yellow;
  52. }
  53. </style>
  54. <body>
  55. <div class="content">
  56. <p>
  57. <span class="span1">1</span>
  58. <span class="span2">2</span>
  59. <span class="span3">3</span>
  60. <span class="span4">4</span>
  61. </p>
  62. </div>
  63. </body>
  64. </html>
  65.  
  66. my alternative:
  67.  
  68. <?xml version='1.0' encoding='UTF-8'?>
  69. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  70. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  71. <head>
  72. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  73. <title>Floating</title>
  74.  
  75. <style type="text/css">
  76. .content {
  77. cursor: pointer;
  78. text-decoration: none;}
  79.  
  80. .content p span {
  81. padding-top: 5px;
  82. height: 37px;
  83. float: left;}
  84.  
  85. .content p .span1 {
  86. left:0;
  87. top:0;}
  88.  
  89. .content p:hover .span1 {
  90. background: url(../images/main-nav-l-over.gif) top left no-repeat;}
  91.  
  92. .content p .span2 {
  93. padding-right: 10px;
  94. padding-left: 6px;
  95. right:0;
  96. top:0;}
  97.  
  98. .content p:hover .span2 {background: url(../images/main-nav-r-over.gif) top right no-repeat;}
  99. </style>
  100. </head>
  101. <body>
  102.  
  103. <a href="#" class="content">
  104. <p>
  105. <span class="span1">&nbsp;</span>
  106. <span class="span2">Julian Assange</span>
  107. </p>
  108. </a>
  109.  
  110. <p></p>
  111.  
  112. <a href="#" class="content">
  113. <p>
  114. <span class="span1">&nbsp;</span>
  115. <span class="span2">It's a serious business</span>
  116. </p>
  117. </a>
  118.  
  119. </body>
  120. </html>

URL: http://stackoverflow.com/questions/999349/rounded-crnr-css-hover

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.