I have the following CSS in attempt to create a rollover effect:
#arrow {
position:absolute;
left:540px;
top:150px;
width:220px;
height:120px;
}
#arrow a{
display: block;
width:220px;
height:120px;
text-decoration: none;
background: url("images/arrow.jpg");
background-position: 0 -120px;
}
#arrow a:hover {
background-position: 0 0;
}
And later, the div tag:
<div id="arrow">
</div>
However, when my mouse rolls over the image, it doesn't change the background position of the link. Thoughts?
Add background-repeat: no-repeat to #arrow a.
It is working, but your background is repeating so it may look like it's not working at all. So either set no-repeat or for the background-repeat or just take off the url setting and then add it on hove only
Related
This question already has answers here:
Title with bottom border smaller than width
(7 answers)
Closed 8 years ago.
I came across interesting underline effect that looks like this:
It's simple, but I can't think of a way to achieve it without using additional html elements in markup, that will be not semantic. I am wondering if it is possible to achieve it using css and without having any additional elements. Effect is essentially an underline / bottom border that is smaller than element and centered under it.
Here is my markup for navigation, where this effect will be used on current page links.
<nav id="navigation" class="right">
<ul>
<li> Home </li>
<li> About </li>
<li> Work </li>
<li> Blog </li>
<li> Contact </li>
</ul>
</nav>
try this one - http://jsbin.com/lumasive/1/
#navigation li a { position:relative; }
#navigation li a:after {
content: '';
position:absolute;
bottom:0;
left: 30%;
right: 30%;
height: 2px;
background:red;
display:block;
}
same as others , the use of a pseudo , but in the flow: DEMO
li ,a {
display:inline-block;
color:#EE7972;
font-size:40px;
font-variant:small-caps;
text-decoration:none;
}
a {
margin:1em;
}
a:after {
content:'';
display:block;
height:0.2em;
width:35%;
margin:auto;
border-bottom:solid ;
}
a:hover {
color:turquoise;/* change color of text and mini-border*/
}
Without additional HTML:
jsFiddle
You can use the "after" css property:
a:after {
display: block;
position: absolute;
content:"__";
width: 100%; top: 10px;
text-align: center;
left: 0;
}
You can use an :after pseudo-element to append extra markup your a elements:
Like all the other answers, but perhaps a little less CSS required.
a:after {
display: block;
content: "";
width: 60%;
margin: 0 auto;
border-bottom: solid 1px steelblue;
}
http://codepen.io/anon/pen/qebHo
use "after" property to achieve this. : jsFiddle
CSS:
.right ul li a{
position:relative;
text-decoration:none;
}
.right ul li a:after{
content: '';
position:absolute;
bottom:0;
left: 30%;
right: 30%;
background:black;
height:1px;
}
You can as well use linear backgrounds: DEMO or DEMO 2
CSS demo 1
a {
margin:1em;
padding-bottom:0.2em;
background:linear-gradient(
to left,
transparent 33%,
#EE7972 33%,
#EE7972 66%,
transparent 66%
)
bottom no-repeat;
background-size: 100% 3px;
}
CSS demo 2
a {
margin:1em;
padding-bottom:0.2em;
background:linear-gradient(
to left,
#EE7972 ,
#EE7972
)
bottom no-repeat;
background-size: 1em 3px;
}
Possible animation with this border: border animated
.navbar {
position:relative;
height: 50px;
}
ul {
height:inherit;
position:absolute;
top:19%;
}
ul li {
height:inherit;
padding: 10px 1px 10px 1px;
display:inline;
font-size:1.3125em;
transition: all 0.4s ease;
}
ul li:hover {
background-color: #0E0E0E;
background: url(img/a.svg) no-repeat;
background-position: 0px 5px;
}
So, basically, i would like to apply an image to the highlighted unordered list items, but this image NEVER appears, how is that?
You've got the image url incorrect. Either that or you have some other styles conflicting or your CSS does not correctly match your HTML.
See this fiddle. Using what I'd expect your HTML structure to be, it works fine using an external image;
JS FIDDLE 1
If you also want the background colour to be applied as well as the picture you'd need to change your CSS to this;
ul li:hover {
background-color: #0E0E0E;
background-image: url(img/a.svg);
background-repeat: no-repeat;
background-position: 0px 5px;
}
JS FIDDLE 2
HTML
<ul id="NavList">
<li id="Home"></li>
<li id="About"></li>
</ul>
CSS:
#Home {
background: url('NavIcons/1.gif');
}
#Home a:hover {
background: url('NavIcons\2.gif');
}
I am creating a navigation list that changes its image on hover, but it doesnt work.
If you want to show the background change of #Home or #About when hovering only on a then you can use the following:
HTML
<ul id="NavList">
<li id="Home">1<div></div></li>
<li id="About">2<div></div></li>
</ul>
CSS
#Home,#About {
position:relative;
width:70px;
height:50px;
}
#Home div, #About div{
position:absolute;
background: url('http://i.stack.imgur.com/2JzQz.jpg');
background-position:-20px 0px;
top:0px;
width:100%;
height:100%;
}
#Home a,#About a{
position:absolute;
top:20px;
left:20px;
z-index:100;
}
#Home a:hover+div , #About a:hover+div{
background: url('http://i.stack.imgur.com/7rx8G.jpg');
background-position:-20px 0px;
}
Demo
Got this idea from How to style the parent element when hovering a child element? .My CSS is different but using same idea.
a tag will probably not be large enough to show your image. You can try this
#Home {
background: url('NavIcons/1.gif');
}
#Home:hover {
background: url('NavIcons/2.gif');
}
or give width and height to a.
try like this
#Home {
background: url(NavIcons/1.gif) 0 0 no-repeat;
}
#Home:hover {
background: url(NavIcons/2.gif) 0 0 no-repeat;
}
JsFiddle demo : But this for changing color on hover
Please check for image URL if not coming properly
I think you might want to try styling the A rather then the LI since it's just a placeholder as list item for the actual link.
#Home a {
background: url('NavIcons/1.gif');
}
#Home a:hover {
background: url('NavIcons/2.gif');
}
These Sprite buttons are driving me bonkers. I can almost get them to work, but not quite.
I'm playing with this very simple sprite image:
I've got a jsfiddle project >> HERE << if you want to see that, but the code is below if you just want to look at it.
For my CSS, I have the following:
#menu {
left:10px;
top:50px;
height:300px;
width: 147px;
position:fixed;
}
.sprite {
background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
height:50px;
padding-left: 50px;
width:147px;
z-index:1;
}
.sprite a {
background-position: 0px 0px;
color:Red;
vertical-align: middle;
}
.sprite a:hover {
background-position: 0px -50px;
color:Yellow;
}
With that, my HTML is simple and small:
<html>
<body>
<ul id="menu">
<li class="sprite">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
I can't seem to get my active link image (at position 0) or my hover link image (at position 50) to show.
Also, I'd like to find a way to make the entire rectangular region (50 x 147) the hyperlink.
Could someone help me, please?
Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ?
CSS:
#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }
And HTML:
<html>
<body>
<ul id="menu">
<li class="sprite current">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
I updated your fiddle: http://jsfiddle.net/PZh9F/12/
As you ha set the background of the ul (as it should) you also need to change the backgorund position of this same ul on hover, so not for the a as you did. Change the text color however should be done with a:hover I hope this points you in the right direction.
You're applying background to <li> tags and background-position to <a> tags instead of applying both to the same set of tags.
you defined the background for li.sprite not the hyperlink . that's why when a:hover happens there is no background to go -50px down .
.sprite a {
background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
background-position: 0px -100px;
color:Red;
vertical-align: middle;
display:block;
width:147px;
height:50px;
}
.sprite a:hover {
background-position: 0px -50px;
}
just a few issues:
The anchor tags weren't closed, so that may have caused some issues.
Any time you want something to behave like a link, it should use an anchor tag; I noticed the first li tag was just text. Technically, you can still achieve the same effect, but I'm guessing you're attempting to link to something.
When you're using html text for links within a button that is using a background image, I recommend putting the text into a span which makes it easier to format. When you add padding to an anchor tag without using the span, you can get extra padding on the opposite end in some browsers even with a set width. Just a little trick I learned over the years.
When using sprites, make sure you add height, width and display:block properties to the "a" selector. This will ensure that the entire link is clickable.
It looks like some of your hovers are jumping, it might be an issue with your sprite. It's crucial that your measurements are accurate. If it's even 1px off it can produce an undesired flicker effect.
The complete code is here:
http://jsfiddle.net/PZh9F/65/
Hope that helps!
background-positions by y-axis should have negative values of -50px and -100px.
May be this seems silly question for you guys.. Its about CSS Sprites. I have a navigation which contains 4 menus like.. HOME COMPANY SERVICES SUPPORT although I used a css sprite that have 3 mode/state for static, hover and selected(class called 'current'). I used to call them like..
ul#top-nav-links {list-style:none; background:url(../images/nav-bg.png) no-repeat scroll 0 0; width:508px; height:35px; float:left; margin-left:80px; margin-top:33px; padding-left:4px; margin-right:23px;}
ul#top-nav-links li{float:left; position:relative; z-index:99999;}
ul#top-nav-links li a.home01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
ul#top-nav-links li a.company01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:150px; height:31px; text-indent:-999px; float:left; background-position:-100px 0px;}
ul#top-nav-links li a.services01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:140px; height:31px; text-indent:-999px; float:left; background-position:-250px 0px;}
ul#top-nav-links li a.support01{background:url(../images/nav.png) no-repeat scroll 0 0; display:block; width:115px; height:31px; text-indent:-999px; float:left; background-position:-390px 0px;}
ul#top-nav-links li a.current{background:url(../images/nav.png) no-repeat scroll 0 -62px; display:block; width:100px; height:31px; text-indent:-999px; float:left;}
and here is the image I used
so I need to display the middle colored one on hover state, although the last one for the current state, of course the current state wasn't need hover effect..
I know, It should call like this..
ul#top-nav-links li a.company01:hover{background-position:-100px -31px;}
but I curious if somehow that code should be shortened by avoiding to call each menu as separate instead like this...
ul#top-nav-links li a:hover(background-position:0px -31px;}
the above one I tried but the horizontal positioning of the image wasn't possible..
Any thoughts?
drop down a comment, if this question was confused.. :)
I'm not positive about cross-browser support, but this at least works in Chrome 15.
http://jsfiddle.net/tkZMB/
li:hover {
background-position-y: -31px;
}
You could combine this to simplify your overall CSS too.
/* General list item declaration */
li {
width: 130px;
height: 30px;
border: 1px solid gray;
float: left;
background: url(http://i.stack.imgur.com/m5HOI.png);
}
/* For each child move menu over */
li:nth-child(2) {
background-position-x: -100px;
}
/* On hover slide the background up. */
li:hover {
background-position-y: -62px;
}
Sorry, just modified your code to this, though I hope this will help you to produce efficient markup (semantically-correct) and style sheet codes: hopeful that will also solve browser inconsistencies in your codes.
HTML:
<ul class="section">
<li class="home current">
Home
</li>
<li class="company">
Company
</li>
<li class="services">
Services
</li>
<li class="support">
Support
</li>
</ul>
CSS:
.section li {
display: inline;
}
.section a {
background: url(../images/nav.png) no-repeat;
display: inline-block;
}
.section .home a {
background-position: left top;
}
.section .company a {
background-position: -100px 0;
}
.section .services a {
background-position: -250px 0;
}
.section .support a {
background-position: -390px 0;
}
.section .current a {
background-position: 0 -62px;
}