Question

有没有办法在悬停时限制背景区域？（我说的是面包屑）在悬停背景上覆盖箭头和区域之后呢？有没有办法限制这个？

这是代码的html部分：

 <div id="breadcrumbs">
                <ul>
                    <li class="arrow-e"><a href="#">Home</a></li>
                    <li><a href="#">Article</a></li>
                    <li><a href="#">Gaming</a></li>
                    <li><a href="#">Lorem Ipsum</a></li>
                </ul>
                <div class="clear"></div>
            </div><!-- END OF DIV BREADCRUMBS -->

和CSS代码：

  #breadcrumbs {background: rgb(242, 242, 242); height: 100%;padding: 0 0 0 10px}
#breadcrumbs ul {margin: 0}
#breadcrumbs li {background-image: url(../img/icons/arrow.png);background-repeat: no-repeat;background-position: right;display: block;float: left;font-size: 1.35em;text-align: center; text-transform: uppercase;margin: 0;padding: 6px 40px 6px 5px;}
#breadcrumbs li:last-child{background-image: none}
#breadcrumbs li:hover{background: rgba(120,27,32,.9);}
#breadcrumbs li:hover a, #breadcrumbs a:hover, .current a{color: white;text-shadow:0px 0px 1px #696969}

Answer 1

你喜欢这样：

<强> HTML：

<ul>
    <li>bla</li>
    <li>text1</li>
    <li>text2</li>
<ul>

<强> CSS：

ul{
    list-style:none;
    overflow:hidden;
}
li{
    position:relative;
    width:70px;
    height:30px;
    float:left;
    margin-right:20px;
}
li:after{
    content:'';
    background:red;
    width:20px;
    height:30px;
    top:0;
    right:-20px;
    display:block;
    position:absolute;
}
li:hover{
    background:green;
}

http://jsfiddle.net/ECcaJ/

或

HTML

<ul>
    <li>bla<span></span></li>
    <li>text1<span></span></li>
    <li>text2<span></span></li>
<ul>

<强> CSS

li span{
    background:red;
    width:20px;
    height:30px;
    top:0;
    right:-20px;
    display:block;
    position:absolute;
}
li:hover{
    background:green;
}

http://jsfiddle.net/ECcaJ/1/

Answer 2

我认为你必须在悬停时使用背景图像来实现你想要的效果。

Answer 3

你可以这样做为背景着色你的箭头，然后有一个实心箭头图像重叠它

#breadcrumbs li:hover{background-color: rgba(120,27,32,.9);}

但是，最好将背景悬停效果用于带有显示屏的a：li里面的块

这样你可以在li上加一个填充物来阻止a重叠箭头。

需要考虑的其他事项是：只在ie6上的标签上支持悬停。

编辑：错字和格式

CSS - 使用背景和图像

3 个答案:

http://jsfiddle.net/ECcaJ/

http://jsfiddle.net/ECcaJ/1/