CSS - Working with background and image

Question

Link to the site

Is there a way to limit background area on hover? (I am talking about breadcrumbs) On hover background is covering arrow and area after it? Is there some way to limit this?

This is html part of the code:

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

And CSS code:

  #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

you do like this:

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/

or

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

you could do this to colour the background begind your arrow and then have a solid arrow image to overlap it

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

BUT, instead it would be better to use your background hover effect on the a with a display:block inside the li

that way you can put a padding on the li to stop the a from overlapping the arrow.

something else to consider is that :hover is only supported on a tags in ie6.

edit: typo and formatting