html - 如何修复悬停在透明照片上的问题

Question

这是我在创建这张 map 时遇到的问题，当您将鼠标悬停在各州上时，它会切换背景位置，以便图片/州变为深色，但如果我将鼠标悬停在加利福尼亚上空，它会选择内华达州，这就是问题所在我怎么能将悬停调整为仅单个状态。

照片如下: http://ge.tt/9HvFiYA1/v/0左下角是加利福尼亚州，右下角是内华达州，我将鼠标悬停在内华达州下方，它仍然突出显示内华达州而不是加利福尼亚州。

html:

<div id="contentwrap">
        <a href="" id="washington"></a>
        <a href="" id="oregon"></a>
        <a href="" id="california"></a>
        <a href="" id="nevada"></a>
</div>

CSS:

#contentwrap {
    min-width: 1150px;
    max-width: 1150px;
    min-height: 700px;
    max-height: auto;
    margin: 0 auto;
    border: 0px solid #bdbebe;
    top: -52px;
    position: relative;
    padding-bottom: 20px;
}
#washington{
    background-image: url(washington.png);
    background-repeat: no-repeat;
    width: 126px;
    height: 92px;
    background-position: 0px 0px;
    position: relative;
    top: 92px;
    left: 122px;
    display: block;
}
#washington:hover {
    background-position: -131px 0;
}
#oregon{
    background-image: url(oregon.png);
    background-repeat: no-repeat;
    width: 154px;
    height: 126px;
    background-position: 0px 0px;
    position: relative;
    top: 58px;
    left: 88px;
    display: block;
}
#oregon:hover {
    background-position: -162px 0;
}
#california{
    background-image: url(california.png);
    background-repeat: no-repeat;
    width: 154px;
    height: 262px;
    background-position: 0px 0px;
    position: relative;
    top: 28px;
    left: 71px;
    display: block;
}
#california:hover {
    background-position: -155px 0;
}
#nevada{
    background-image: url(nevada.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 186px;
    background-position: 0px 0px;
    position: relative;
    top: -215px;
    left: 137px;
    display: block;
}
#nevada:hover {
    background-position: -171px 0;
}

Answer 1

我已经重新创建了你的情况是 js-fiddle。不过，我没有使用图片，而是使用了颜色。边界框更加明显。

http://jsfiddle.net/Wy7Fp/

如您所见，您的方框重叠。您将不得不想出一些方法来处理这个问题，或者可能使用 image map这样你就可以只使用一张大图

更改您的 CSS 以更好地查看边界框:

contentwrap {
    min-width: 1150px;
    max-width: 1150px;
    min-height: 700px;
    max-height: auto;
    margin: 0 auto;
    border: 0px solid #bdbebe;
    top: -52px;
    position: relative;
    padding-bottom: 20px;
}
#washington{
    background-color:green;
    background-repeat: no-repeat;
    width: 126px;
    height: 92px;
    background-position: 0px 0px;
    position: relative;
    top: 92px;
    left: 122px;
    display: block;
}
#washington:hover {
    background-position: -131px 0;
}
#oregon{
    background-color:blue;
    background-repeat: no-repeat;
    width: 154px;
    height: 126px;
    background-position: 0px 0px;
    position: relative;
    top: 58px;
    left: 88px;
    display: block;
}
#oregon:hover {
    background-position: -162px 0;
}
#california{
    background-color: red;
    background-repeat: no-repeat;
    width: 154px;
    height: 262px;
    background-position: 0px 0px;
    position: relative;
    top: 28px;
    left: 71px;
    display: block;
}
#california:hover {
    background-position: -155px 0;
}
#nevada{
    background-color:orange;
    background-repeat: no-repeat;
    width: 155px;
    height: 186px;
    background-position: 0px 0px;
    position: relative;
    top: -215px;
    left: 137px;
    display: block;
}
#nevada:hover {
    background-position: -171px 0;
}

这是一个实际可行的解决方案:

我继续使用您提供的图像为您设置图像映射方法。你可以看到它的实际效果，here .

HTML

<img id="states" src="http://archive.dadelamkins.com/StackExchange/20697449/Normal%20Map.png" usemap="#states" />

<map name="states">
    <area shape="poly" coords="255,70,169,49,169,73,133,54,133,90,130,104,143,109,147,111,147,115,147,118,147,123,158,129,164,126,178,132,210,134,242,139,248,105" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/Washington.png')" href="#" />
    <area shape="poly" coords="133,109,99,183,94,200,218,234,232,184,229,180,229,173,246,151,244,144,234,141,220,137,187,135,175,135,164,129,149,129,144,126,146,113,140,109" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/Oregon.png')" href="#" />
    <area shape="poly" coords="274,247,246,388,235,384,230,406,155,293,171,224" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/Nevada.png')" href="#" />
    <area shape="poly" coords="167,223,98,204,96,220,89,233,84,239,87,250,90,259,83,274,97,304,104,300,104,318,99,314,97,325,104,330,102,342,114,381,114,391,117,398,131,402,141,414,148,415,152,421,156,426,168,439,170,454,218,463,224,457,220,458,219,448,232,430,232,422,226,407,152,294,160,256" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/California.png')" href="#" />
</map>

Javascript

flip = function(img) {
    document.getElementById("states").src = img;
}