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.

  1.  permalink
    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?
  2.  permalink
    Hi,
    It's definitely possible with only CSS. This might help: http://meyerweb.com/eric/css/edge/popups/demo2.html
    Ben
    Thankful People: JugularBean
  3.  permalink
    Thanks again man this was indeed simple and useful, I'm now conferring Guru status upon you!
    • CommentAuthorPettyRider
    • CommentTimeDec 1st 2007 edited
     permalink
    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.
Add your comments
    Username Password
  • Format comments as (Help)