Reputation: 8705
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
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;
}
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;
}
Upvotes: 1
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
Reputation: 12021
I think you must use background-image on hover to achieve what you want.
Upvotes: 0