change image on hover not working

Question

I'd like to replace an image with another on hover, but I'm having difficulty implementing it- nothing seems to happen on hover.

JS Fiddle

<div id="container">
    <div class="content">
        <div class="left">
            <a href="#"><img src="http://dummyimage.com/307x349/000/fff" alt="tyler st salon home"></a>
        </div><!-- end left -->
        <div class="center">
            <a href="#" class="top"><img src="http://dummyimage.com/307x166/000/fff" alt="about tyler st salon" class="about_hover"></a>
            <a href="#" class="bottom"><img src="http://dummyimage.com/307x166/000/fff" alt="tyler st salon service" class="services_hover"></a>
        </div><!-- end center -->
        <div class="right">
            <a href="#" class="top"><img src="http://dummyimage.com/307x166/000/fff" alt="tyler st salon products" class="products_hover"></a>
            <a href="#" class="bottom"><img src="http://dummyimage.com/307x166/000/fff" alt="contact tyler st salon" class="contact_hover"></a>
        </div><!-- end right -->
    </div><!-- end content -->    

</div><!-- end container -->

html, body, #container, .content, .left, .right, .center {
    height: 100%;
}

#container {
    min-height: 349px;
}

#container {
    margin: 0 auto;
    width: 960px;
}

#container .content {
    margin-top: 115px;
    position: relative;
}

#container .content .left,
#container .content .center,
#container .content .right { 
    position: relative;
    width: 307px;
}

#container .content .left {
    float: left;
}

#container .content .center {
    float: left;
    padding-left: 19px;
}

#container .content .right {
    float: right;
}

#container .content .top,
#container .content .bottom {
    position: absolute;
}

#container .content .top {
    top: 0;
}

#container .content .bottom {
    bottom: 0;
}

#container .content .center .about_hover {
    width: 307px;
    height: 166px;
    background: url('img/about_hover.jpg') center center no-repeat;
}

#container .content .center .services_hover {
    width: 307px;
    height: 166px;
    background: url('img/services_hover.jpg') center center no-repeat;
}

#container .content .center .products_hover {
    width: 307px;
    height: 166px;
    background: url('img/products_hover.jpg') center center no-repeat;
}

#container .content .center .contact_hover {
    width: 307px;
    height: 166px;
    background: url('img/contact_hover.jpg') center center no-repeat;
}

score 2 · Accepted Answer · answered Apr 12 '13 at 22:20

2

Here is 1 variant
check this fiddle
i hide your image when i hover

a:hover img
{
    display:none;
}

and i set your background image (i moved your class from the image) to the <a> tag.

<a href="#" class="top about_hover">

the sample fiddle is applied just for your <a class="top"...

feel free to play with it

answered Apr 12 '13 at 22:20

trajce

1,480
2
23
36

my only challenge is `class="top"` is intended to be used multiple times throughout the site, which is why i put `class="about_hover"` within the `img` tag. – AMC Apr 12 '13 at 23:10
@AMC you can always add multiple classes.`top` was just an example – trajce Apr 12 '13 at 23:26
1

wow, i had no idea you could have double class selectors. (clearly, i've got a lot left to learn.) thank you for your help. for future reference- http://css-tricks.com/multiple-class-id-selectors/ – AMC Apr 12 '13 at 23:31

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

Your css specifies changing the background of the area which is covered by the image. To actually change the image, you'll have to monkey with the <img src="..."> content, probably through a hover event (or mousein/mouseout) listener in javascript.

This answer shows how to change an image on a click event. To adapt for a hover event, just change the event listener to .hover()

edited May 23 '17 at 11:49

Community

1
1

answered Apr 12 '13 at 22:15

PaulProgrammer

13,123
3
29
49

"..To actually change the image, you'll have to monkey with the content" could you explain? – AMC Apr 12 '13 at 22:17

score 0 · Answer 3 · answered Apr 12 '13 at 22:17

0

this is the right way to write it:

.element:hover{
/* stuff */
}

this is wrong:

.element_hover{
    /* stuff */
    }

answered Apr 12 '13 at 22:17

Yenn

889
5
20

`.element_hover` is referring to a specific class, but I do see now that I've completely neglected to add `:hover` to the end of that. – AMC Apr 12 '13 at 22:21
yea sometimes you have to use :hover to make a hover effect :). if this helped to solve your problem please consider to accept my answer as correct thanks – Yenn Apr 12 '13 at 22:26

score 0 · Answer 4 · answered Apr 12 '13 at 22:29

Here's an example of javascript image swapping (no jQuery)

<!doctype html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', myInit, false);

function myInit()
{
    byId('img1').addEventListener('mouseover', onMouseOverOut, false);
    byId('img1').addEventListener('mouseout', onMouseOverOut, false);
}

// swaps the hoverImg and src attributes of the image it's attached to as an event handler
function onMouseOverOut()
{
    var tmp = this.src;
    this.src = this.getAttribute('hoverImg');
    this.setAttribute('hoverImg', tmp);
}
</script>
<style>
#img1
{
    height: 256px;
    width: 256px;
}
</style>
</head>
<body>
    <img id='img1' hoverImg='http://www.gravatar.com/avatar/c89d764421e3857bf346733ff58d8d2a?s=128&d=identicon&r=PG' src='http://dummyimage.com/307x349/000/fff'/>
</body>
</html>

change image on hover not working

4 Answers4