CSS半径和悬停填充整个区域 [英] CSS radius and hover fill entire area
本文介绍了CSS半径和悬停填充整个区域的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个标签式导航。
I'm trying to create a tabbed navigation.
我无法获取悬浮颜色填充我的标签页的整个区域(圆角顶部左/右)。现在,悬停只覆盖标签中的链接文字,而且悬停没有圆角。
I can't get my hover color to fill the entire area of my tabs (rounded top left/right). Right now the hover only covers the linking text within the tab and the hover doesn't have rounded corners.
我想让鼠标悬停在标签区域,圆角和所有。
I want the hover to perfectly cover the area of the tabs - rounded corners and all.
HTML:
<div id="tabbed-widget-2" class="widget tabbed-widget">
<div class="widget-wrap">
<div class="tw-tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="tw-tabbed-nav ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li id="tab-link-2-0" class="ui-state-default ui-corner-top">
<a href="#tw-content-2-0">Welcome</a>
</li>
<li id="tab-link-2-1" class="ui-state-default ui-corner-top">
<a href="#tw-content-2-1">Topics</a>
</li>
<li id="tab-link-2-2" class="ui-state-default ui-corner-top">
<a href="#tw-content-2-2">Archives</a>
</li>
<li id="tab-link-2-3" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tw-content-2-3">Social</a>
</li>
</ul>
CSS
#tab-link-2-0, #tab-link-2-1, #tab-link-2-2, #tab-link-2-3 {
background: green;
padding: 2px 12px;
margin: 0 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#tab-link-2-0 a:hover, #tab-link-2-1 a:hover, #tab-link-2-2 a:hover, #tab-link-2-3 a:hover {
background: none repeat scroll 0 0 #ffab35;
}
推荐答案
您样式:悬停为标记不是li
和< a>
是一个内联元素add display:block
给它
http://tinkerbin.com/aqHTscEE
green background is for li tag and you styled :hover for a tag not li
and <a>
is an inline element add display:block
to it
http://tinkerbin.com/aqHTscEE
这篇关于CSS半径和悬停填充整个区域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文