Posted By

stephcode on 03/02/11

Tagged

Versions (?)

Last Edited at 03/02/11 11:13am

Statistics

Viewed 616 times

Favorited by 0 user(s)

Related snippets

Rounded Corner CSS Hover

/ Published in: CSS

Highlighted TextExpand

.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>

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

Report this snippet Tweet