Welcome to WebmasterWorld Guest from 54.163.40.152

Forum Moderators: not2easy

Message Too Old, No Replies

How to set rounded corners on hover?

     

toplisek

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

WebmasterWorld Senior Member 5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



you've got
#myboxes .item1.hover


it should be
#myboxes .item1:hover

with a semi-colon

toplisek

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

WebmasterWorld Senior Member 5+ Year Member



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

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month