Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorJugularBean
- CommentTimeNov 24th 2007
I have images on my page that correspond to a main navigation link each. I want a change in state of the image as well as the corresponding link when I hover over the image and vice-versa.
Is this possible without using Javascript? -
-
CommentAuthorbenjitastic
- CommentTimeNov 24th 2007
Hi,
It's definitely possible with only CSS. This might help: http://meyerweb.com/eric/css/edge/popups/demo2.html
BenThankful People: JugularBean -
-
- CommentAuthorJugularBean
- CommentTimeNov 25th 2007
Thanks again man this was indeed simple and useful, I'm now conferring Guru status upon you! -
- CommentAuthorPettyRider
- CommentTimeDec 1st 2007 edited
Anyone ever try anything like this?:<a href="#home" id="home-link">Home</a>#home-link:after {
content: ".";
display: none;
width: 50px;
height: 50px;
position: absolute;
left: 100px;
top: 100px;
text-indent: -9999px;
overflow: hidden;
background: url(images/home-link.hover.png) no-repeat left top;
}
#home-link:hover:after {
display: block;
}
I'm not familiar with the precise specs of the :after pseudo-class, but I imagine the above would be a viable CSS solution without the need of additional markup. It'd probably only work in FF and Safari though :)
Update
Tested selectors in FF and they worked, but I could not get the :after content to render block. You'd probably have to enter a block-level element for content
Update
Looks like it's the positioning that's a bitch. I got it to honor display: block; by setting the anchor to block, but still, no positioning. Also, could not enter HTML into the content property for the life of me.
1 to 4 of 4