Advanced Search

Return to Snippet

Revision: 42268
at March 3, 2011 05:11 by stephcode
Updated Code 
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>              
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content p{
        position:relative;
        height:100px;
        width:400px;
        border:1px solid black;
      }
      .content p span{
        position:absolute;
      }

      .content p .span1{
        left:0;
        top:0;
      }

      .content p .span2{
        right:0;
        top:0;
      }

      .content p .span3{
        left:0;
        bottom:0;
      }

      .content p .span4{
        right:0;
        bottom:0;
      }

      .content p:hover .span1{
        background-color:red; 
      }

      .content p:hover .span2{
        background-color:blue; 
      }

      .content p:hover .span3{
        background-color:green; 
      }

      .content p:hover .span4{
        background-color:yellow; 
      }
    </style>
  <body>
    <div class="content">
      <p>
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
        <span class="span4">4</span>
      </p>
    </div>
    </body>
</html>

my alternative:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>              
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
        
		<style type="text/css">
        .content {
            cursor: pointer;
            text-decoration: none;}
        
        .content p span {
			padding-top: 5px;
			height: 37px;
			float: left;}
        
        .content p .span1 {
            left:0;
            top:0;}
            
        .content p:hover .span1 {
			background: url(../images/main-nav-l-over.gif) top left no-repeat;}
        
        .content p .span2 {
            padding-right: 10px;
            padding-left: 6px;
            right:0;
            top:0;}
        
        .content p:hover .span2 {background: url(../images/main-nav-r-over.gif) top right no-repeat;}
        </style>
</head>
  <body>

    <a href="#" class="content">
      <p>
        <span class="span1">&nbsp;</span>
        <span class="span2">Julian Assange</span>
      </p>
    </a>
    
    <p></p>
    
    <a href="#" class="content">
      <p>
        <span class="span1">&nbsp;</span>
        <span class="span2">It's a serious business</span>
      </p>
    </a>

    </body>
</html>

Revision: 42267
at March 2, 2011 11:13 by stephcode
Initial Code 
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>              
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content p{
        position:relative;
        height:100px;
        width:400px;
        border:1px solid black;
      }
      .content p span{
        position:absolute;
      }

      .content p .span1{
        left:0;
        top:0;
      }

      .content p .span2{
        right:0;
        top:0;
      }

      .content p .span3{
        left:0;
        bottom:0;
      }

      .content p .span4{
        right:0;
        bottom:0;
      }

      .content p:hover .span1{
        background-color:red; 
      }

      .content p:hover .span2{
        background-color:blue; 
      }

      .content p:hover .span3{
        background-color:green; 
      }

      .content p:hover .span4{
        background-color:yellow; 
      }
    </style>
  <body>
    <div class="content">
      <p>
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
        <span class="span4">4</span>
      </p>
    </div>
    </body>
</html>
Initial URL 
http://stackoverflow.com/questions/999349/rounded-crnr-css-hover
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Rounded Corner CSS Hover

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
image, background

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS