class problem

[robert_gsfame]

I have this <a href="aaa.php" class="pagination">a</a>

 

.pagination{border:1px solid #CCCCCC; display:block;float:left; margin-left:2px;padding-left:4px; padding-right:4px;padding-top:2px;padding-bottom:2px;}

 

how to create the hover effect so that once the cursor touch the text, then the box background will turn from #CCCCCC into #990000

 

I have the problem with the padding as it prevents me from getting the hover effect perfectly

[Ken2k7]

There's a JavaScript approach and a CSS approach.

 

JavaScript:

Give the <A> tag an ID attribute. Let's call it "PaginationHyperlink". Then use the mouseover event.

document.getElementById("PaginationHyperlink").mouseover = function () { this.parentNode.bgColor = '#990000'; }

(Not tested)

 

CSS:

Assuming the parent node is a DIV...

div .PaginationHyperlink:hover {
     background-color: #990000 !important;
}

[robert_gsfame]

still confused.....i am really new to css..so could u please be more specific

 

I add <a href="aaa.php" onmouseover="effect()" id="hyperlink">

 

javascript:

function effect{

document.getElementById("hyperlink").style.bgcolor = "#990000";}

 

nothing was happen

[nano]

Why can't we do it with the :hover selector 

 

CSS:

        .pagination{
          border:1px solid #CCCCCC;
          margin-left:2px;
          padding:2px 4px;
          display:block;
          float:left;
        }
        .pagination:hover {
          background-color:#990000;
        }
        .what {
          float:left;
        }

 

HTML:

<div class="what">I have this</div><a href="aaa.php" class="pagination">a</a>

 

You need to watch out when you float just the anchor tag in FF and IE8 as it will end up before the text.

 

So that's why the div is there around your primary text which is floated too..

 

Does that help?

[robert_gsfame]

nano..it works well only in FF browser but not IE 6.0

[robert_gsfame]

stupid me.....i use <span>......anyway i found the hover effect works well in both browsers!

 

THANKS NANO....!!!!!