i have pagination numbers in circles, when hover on circle corresponding image display, in safari image overlapping circle's border..
fiddle:- http://jsfiddle.net/2yx5e3w1/
css , html
* { margin: 0; padding: 0; } ul li { list-style: none; } { text-decoration: none; } .pagination_wrap * { box-sizing: border-box; } .pagination_wrap { float: left; width: 680px; box-sizing: border-box; position: relative; } .pagination_wrap ul { display: table; text-align: center; width: 620px; margin: auto; } .pagination_wrap li { display: table-cell; vertical-align: middle; } .pagination_wrap li { display: block; width: 51px; height: 51px; border-radius: 50%; border: 2px solid #dadada; background: #e2e2e2; margin: auto; overflow: hidden; } .pagination_wrap li a:after { content: ""; display: inline-block; height: 100%; margin-left: -4px; vertical-align: middle; width: 0; } .pagination_wrap li img { display: none; margin-left: -4px; vertical-align: middle; } .pagination_wrap li span { vertical-align: middle; display: inline-block; font-family: arial, helvetica, sans-serif; color: #000; font-size: 19px; line-height: 47px; } .pagination_wrap li a:hover img, .pagination_wrap li.current img { display: inline-block; } .pagination_wrap li a:hover span, .pagination_wrap li.current span { display: none; } a.prev_arrow, a.next_arrow { height: 25px; width: 15px; background-image: url("http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/slide_nav.jpg"); position: absolute; } a.prev_arrow.disabled { background-position: left -28px; cursor: default; } a.next_arrow.disabled { background-position: right -28px; cursor: default; } a.prev_arrow { float: left; background-position: left top; left: 0; top: 12px; } a.next_arrow { float: right; background-position: right top; right: 0; top: 13px; }<div class="pagination_wrap"> <ul> <li class="current"><a href="#"><img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /><span>1</span></a></li> <li><a href="#"><span>2</span> <img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /></a></li> <li><a href="#"><span>3</span> <img src="http://i9.dainikbhaskar.com/thumbnail/51x51/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg" alt="" /></a></li> </ul> </div>
give border radius of 100% both image , container
.pagination_wrap li a, .pagination_wrap li img { -webkit-border-radius: 100%; border-radius: 100%; } also note safari windows has been discontinued since may 9, 2012.
Comments
Post a Comment