CODEWITHSUNDEEP
htmlcss
Sasha
Sasha

Reputation: 8705

CSS - Working with background and image

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}

Upvotes: 0

Views: 419

Answers (3)

sandeep
sandeep

Reputation: 92873

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/

Upvotes: 1

Evert
Evert

Reputation: 8541

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

Upvotes: 0

Jeaf Gilbert
Jeaf Gilbert

Reputation: 12021

I think you must use background-image on hover to achieve what you want.

Upvotes: 0

Related Questions