Question

我想在悬停时改变背景图像。这部分我有工作，但由于某种原因，新图像出现在不同的位置。我也不知道让正常的图像在盘旋时消失。我创建了两个不同的图像来获得我想要的效果。我不确定这是否是正确的方法，但这是我能想到的。此外，出于某种原因，我无法让cursor:pointer;使用`background-image。

如何让悬停图像与原始图像位于同一位置，并将其完全覆盖，因此初始图像不显示，或删除第一个图像直到不悬停。

#blue {
  background: blue;
  height: 600px;
  width: 100%;
}
#home-arrow {
  /*height: 100px;*/
  width: 100%;
  position: absolute;
  top: 65%;
  z-index: 99;
  /*cursor: pointer;*/
}
#circle-arrow {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}

<div id="blue">
  <div id="home-arrow">
    <div id="circle-arrow"></div>
  </div>
</div>

Answer 1

在您的css中#circle-arrow选择器之后添加#home-arrow:hover，只需添加悬停图片作为背景，它就适合您。

#home-arrow:hover #circle-arrow{
    background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
}

编辑1 （仅悬停在圆圈上）

如果您只想将鼠标悬停在圈子上，则只需移除#home-arrow:hover并将其替换为#circle-arrow:hover

#circle-arrow:hover{
        background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
    }

如果你将图像剪裁到圆的宽度，那么圆圈悬停会很好。现在两个图像左右两侧都有很多空白区域。

编辑2 （z-index存在问题）将background-position:center添加到#home-arrow:hover并删除宽度，高度等，如下所示：

#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
   background-position: center; 
  margin: auto auto;
}

See Updated Fiddle Here

Answer 2

我注意到＃home-arrow，这个位置是绝对的。对于＃home-arrow：悬停，位置是相对的。这可能会导致问题。

Answer 3

尝试将#circle-arrow:hover选择器替换为#home-arrow:hover

＆＃13;

#blue {
  background: blue;
  height: 600px;
  width: 100%;
}
#home-arrow {
  /*height: 100px;*/
  width: 100%;
  position: absolute;
  top: 65%;
  z-index: 99;
  /*cursor: pointer;*/
}
#circle-arrow {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
#circle-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}

＆＃13;

<div id="blue">
  <div id="home-arrow">
    <div id="circle-arrow"></div>
  </div>
</div>

＆＃13;

Answer 4

改变你的课程＃34;＃home-arrow：hover＆＃34;由

#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 195px;
  width: 300px;
  margin: auto auto;
  position: relative;
  top: 40%;
  background-position: 0 78px;

}

Answer 5

使用#circle-arrow:hover替换css中的#blue { background: blue; height: 300px; width: 100%; } #home-arrow { /*height: 100px;*/ width: 100%; position: absolute; top: 5%; z-index: 99; /*cursor: pointer;*/ } #circle-arrow { background: url("http://optimumwebdesigns.com/images/circle-arrow.png") no-repeat center center; height: 155px; width: 300px; margin: auto auto; position: relative; top: 40%; } #circle-arrow:hover { background: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png") no-repeat center center; }。

然后你可以修剪一下css ......

#blue

注意我更改了top选择器的高度和#home-arrow的{{1}}属性，因此可以在Working Fiddle中看到...

#circle-arrow和#circle-arrow:hover是您应该只能复制/粘贴到CSS中的两个选择器。

Answer 6

除了背景图片的所有悬停问题......

cursor: default;

获取背景图片以悬停

6 个答案: