CODEWITHSUNDEEP
htmlcss
zhuanzhou
zhuanzhou

Reputation: 2443

is there a way to do it by css and suitable for IE,Firefox?

enter image description here

when the mouse hovers on the text. the white rounded corner appears as the text's background. is there a way to get that by css? and how to slice the rounded corner background. thank you

Upvotes: 3

Views: 57

Answers (3)

derekerdmann
derekerdmann

Reputation: 18242

The classic technique is CSS Sliding Doors, but now you can use some CSS 3 magic to get the same effect.

a {
    color: #fff;
}

a:hover {
    color: #222;    
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Here's a working example at JSBin: http://jsbin.com/acizer

Upvotes: 1

Kyle
Kyle

Reputation: 4238

You can perform rounded-corner css styling by applying the following attributes:

.rounded-corners :hover{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Upvotes: 3

krasnerocalypse
krasnerocalypse

Reputation: 966

Yes, you'll want to use the :hover selector to make the background appear and disappear, and the border-radius, -moz-border-radius and -webkit-border-radius attributes to make the corners rounded.

Upvotes: 0

Related Questions