Question

当有人在id=main_touch上方悬停时，我需要更改class=buttontpt的背景图片

以下方式悬停不起作用。

<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>

Answer 1

使用jQuery，这非常简单：

$(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");
    }
});

使用纯CSS，这有点棘手。如果你想在.buttonpt悬停时更改#main_touch的背景，那么你需要确保#main_touch图像出现在HTML中的.buttonpt之后。

然后，你可以这样做：

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

Answer 2

您的图片有src。你应该删除它，并仅使用背景和div这样做。不要使用无效的HTML！然后你可以将div放在任何你喜欢的地方。：

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

CSS - 如何修复悬停？

2 个答案: