CSS - how to fix the hover?

Question

I need to change the background image of id=main_touch when someone hovers over the class=buttontpt

Following way hover is not working.

<style>
    #main_touch {
        background: url(custom12/<?=$this->mylanguage;?>.jpg) 0 0 no-repeat;
    }
    #main_touch:hover {
        background: url(custom12/<?=$this->mylanguage;?>.hover.jpg) 0 0 no-repeat;
    }    
</style>

<img src="custom12/<?=$this->mylanguage;?>.jpg" width="1024" height="768" border="0" usemap="#map" id="main_touch" />        
    <map name="map">
        <area shape="rect" coords="26,72,405,194"  nohref="nohref" class="buttontpt" />
        <area shape="rect" coords="26,240,405,362"  nohref="nohref"  class="buttontpt" />
        <area shape="rect" coords="26,403,405,525"  nohref="nohref"  class="buttontpt" />
        <area shape="rect" coords="26,555,405,677"  nohref="nohref"  class="buttontpt" />
    </map>

I guess the name of the hover-image in the css is wrong (typo), it ends with .hover.jpg, maybe changing to hover.jpg already solves it (based on the name of the hover.jpg). — matthias_h, Sep 28 '14 at 11:07
I don't think an image has a background. It has a source (src). — emerson.marini, Sep 28 '14 at 11:13
But if you still want to keep an invalid HTML markup, remove the `img` `src` and then it will work: http://jsfiddle.net/e2jfytzs/ — emerson.marini, Sep 28 '14 at 11:15
Check this out: http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css — emerson.marini, Sep 28 '14 at 11:20

score 1 · Accepted Answer · answered Sep 28 '14 at 11:16

Using jQuery, this is really easy:

$(document).ready(function() {

    $(".buttonpt").mouseover(function() {
        $("#main_touch").attr("src", "path/to/other/image");
    });

    $(".buttonpt").mouseout(function() {
        $("#main_touch").attr("src", "path/to/original/image");
    }
});

Using pure CSS, this is a bit trickier. If you want to change the background of #main_touch when .buttonpt is hovered, then you need to make sure that the #main_touch image comes AFTER the .buttonpt in the HTML.

Then, you can do something like this:

.buttonpt:hover ~ #main_touch {
    background: url("path/to/other/image");
}

score 0 · Answer 2 · answered Sep 28 '14 at 11:20

Your image has a src. You should delete that and do like this only with backgrounds and divs. Don't use invalid html! And then you can position the div wherever you like.:

    #first {
        background: url(http://lorempixel.com/400/200/) 0 0 no-repeat;
      width:400px;
      height:200px;
    }
    #second:hover #first{
        background: url(http://lorempixel.com/600/200/) 0 0 no-repeat;
    }

   
<div id="second">hover on it to change it
<div id="first"><div>
</div>

CSS - how to fix the hover?

2 Answers2