homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
How to set rounded corners on hover?
toplisek




msg:4459330
 8:12 am on May 30, 2012 (gmt 0)

I like to get coloured boxes which are rounded when I hover.

Please find the following script as sample:
<div id="myboxes">

<div class="item1">
<a href="">
<img width="280" height="280" alt="" src="images/myitem1.jpg">
</a>
</div>

</div>

and CSS CLASS:
#myboxes .item1 {
border-radius: 10px 10px 10px 10px;
float: left;
width: 280px;
height: 280px
}
#myboxes .item1.hover {
background: none repeat scroll 0 0 #000000;
cursor: pointer;
}
#myboxes .item1.hover a {
text-decoration: none;
}

Why is hover not working? Need help.

 

londrum




msg:4459345
 9:16 am on May 30, 2012 (gmt 0)

you've got
#myboxes .item1.hover

it should be
#myboxes .item1:hover
with a semi-colon

toplisek




msg:4459396
 12:08 pm on May 30, 2012 (gmt 0)

Is it technical possible to use .item1.hover?

As I understand IE did not support border-radius: 10px 10px 10px 10px; in the past. Is this supported inside new editions like V9?

rocknbil




msg:4459522
 4:35 pm on May 30, 2012 (gmt 0)

.item1.hover would be a class of item 1 with a class of hover

<a class="item1 hover">

It would be a very bad idea to create a class name like that, but it would probably work.

As I understand IE did not support border-radius: 10px 10px 10px 10px; in the past. Is this supported inside new editions like V9?


There are some workarounds. and BTW you only need

border-radius:10px;

for all four corners. This may or may not be overhead, but you can see what it does.

-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved