Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Nicholas Phillips
Nicholas Phillips
811 Points

Rollover Link with an Image AND Text

Hello,

I am trying to create a rollover link without JavaScript by using "hover" in CSS along with a background image, as I have seen this done in many online tutorials. Here is my problem. The link leads to an online store and consists of a square button image of a shopping cart with the text "Online Store" to the right. The end result is that when the mouse hovers over the image OR the text, I want BOTH of them respond with a rollover effect ("swapping" the image and making the text bold). Is it possible to do this while maintaining the text as a separate entity from the image? Or do I need to just bite the bullet and include the text as part of my image sprite in order for both the respond simultaneously?

7 Answers

Richard Feinburg
Richard Feinburg
2,970 Points

What do you want the image to do? If you want to change the image completely or change color then you will need to put both images on image and just move the background-position when hover over.

Nicholas Phillips
Nicholas Phillips
811 Points

There are two images, one is a red color, the other is a slightly brighter color for the hover effect. I understand how to combine the two images into a sprite and manipulate the image position to create the effect. My problem is specifically how to make it so that the text to the right of the image will take on a bold hover effect even if the mouse is hovered over the image instead of the text. Does that make sense?

Nicholas Phillips
Nicholas Phillips
811 Points

I understand how to apply the over effect to the image sprite and also how to apply a hover effect to text, but am lost on how to make both occur simultaneously.

Richard Feinburg
Richard Feinburg
2,970 Points

Here I did a quick code without the bold hovering.

http://cssdeck.com/labs/full/lood56zt

Nicholas Phillips
Nicholas Phillips
811 Points

Yes, that is the type of image effect I want, and I think I understand how to do that part. I also understand how to create a bold rollover effect on the text that will be to the right of my image. My problem is that the two work independently. In other words, I hover over the image sprite and it behaves properly, but the text to the right does not change. Likewise, if I mouse over the text, it changes to bold, but the image doesn't respond. I want both to respond regardless of whether I am hovering over the image or the text. I wanted to keep them as two separate entities (image and text), but I am getting frustrated and debating creating an image that has the text in it, eliminating the separate text all together. Any ideas? Thanks for the help by the way!

Nicholas Phillips
Nicholas Phillips
811 Points

I figured out how to do this, so I am sharing the solution for anyone who may run into the same issue. What I did was create a block div with a background image. Then, I created a link in that div and set it to display as a block with matching proportions to the div, setting the top and left positions to 0. Then I positioned my text link using CSS and added a hover effect to the div, changing the background image and font weight.

CSS:

div.cart {
    display: block;
    width: 130px;
    height: 59px;
    font-weight: 300;
    background-image:url(../img/cart.jpg);
    background-repeat: no-repeat;
}

div.cart:hover {
    background-image:url(../img/cartOn.jpg);
    font-weight: 400;
}

div.cart a {
    color:#FF3300;
    letter-spacing: 2px;
    font-size:120%;
    display:block;
    width:130px;
    height: 59px;
    top: 0;
    left: 0;
    text-align: right;
}
.plainLink {
    text-decoration: none;
}

HTML:

<div class="cart">
            <p>

                <a href="#" class="plainLink" alt="Buy Dahlicious Products Online">ONLINE<br/>STORE!</a>

            </p>

        </div>

Why not take a look at pseudo elements? That way you can keep your HTML markup clean, and simply have the image be a pseudo element that is positioned to the left.