Question

这是我的问题我创建这个地图，当你悬停在状态时，它切换背景位置，使图片/状态变为深色但如果我在加利福尼亚上空盘旋它选择内华达，那就是问题我该怎么办？将悬停调整为单个状态。

照片中的照片： http://ge.tt/9HvFiYA1/v/0 左边的botom是加利福尼亚州，右下角是内华达州，我在内华达州下空盘旋，它仍然突出内华达，而不是加州。

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

如何修复悬停在透明照片上

1 个答案:

这是一个实际的工作解决方案：