Advanced Search

Rounded Corner CSS Hover

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

Expand | Embed | Plain Text

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.