Swap image with text ( CSS or jQuery? )

Question

I'm trying to swap an image logo with text on mouse hover.

I have been looking at jquery and css to create this transition, but I haven't been lucky with finding a solution. Hopefully you can help me out a bit.

This is what I'm stuck with.

Example http://jsfiddle.net/VugzA/

HTML

<div id="logo">
<ul>
    <li>
        <a href="#home" title="Back to Home?">                        

            <span class="logo_icon">
                <img src="some.gif" alt="Logo image" width="45" height="55" />
            </span>

            <span class="text">Some Text</span>

        </a>
    </li>
</ul>
</div>

CSS

#logo ul {
list-style: none;
margin-left: -20px;
}

.logo_icon {
display: block;
} 

.logo_icon:hover {
display: none;
}

.text {
display: none;
}

.logo_icon:hover + .text {
display: block
}

trajce · Accepted Answer · 2013-04-09 14:51:37Z

4

Here is an update to your fiddle

Updated html:

<div id="logo">
<a href="#home" title="Back to Home?">                        
<span class="logo_icon">
<img src="some.gif" alt="Logo image" width="45" height="55" />
</span>
<span class="text">Some Text</span>
</a>
</div>

and updated css:

.logo_icon {
    display: block;
} 
.text {
    display: none;
}
#logo a:hover .logo_icon
{
    display:none;
}
#logo a:hover .text
{
    display:block;
}

What i do here is tie the hover event on the link instead of like you did (hover on image and text), and the image and text span are children of that element. So, when you hover on the link, the specific styles apply.

edited Apr 9, 2013 at 14:51

answered Apr 9, 2013 at 14:28

trajce

1,4903 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

trajce Over a year ago

if this answers your question, please mark it as an answer :)

andyb Over a year ago

Please explain why this works and also see meta.stackexchange.com/questions/145987/…

trajce Over a year ago

Thanks for mention this @andyb. i wasnt aware of that :)

fernandosavio Over a year ago

This is a demo modified from @trajce.. maybe it helps

Collectives™ on Stack Overflow

Swap image with text ( CSS or jQuery? )

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related