将鼠标悬停在图像上时无法实现点击效果答案

【问题标题】：I am unable to achieve click effect when hover over image将鼠标悬停在图像上时无法实现点击效果
【发布时间】：2015-02-20 17:24:41
【问题描述】：

示例 div 可以正常悬停，但背景图像不会移动。 div 悬停良好，但背景中的图像保持在同一位置。我想要实现的是，当您将鼠标悬停在 div 上时，它会像点击一样移动，但 div 中的背景图像似乎根本没有移动。我希望 div 和背景像真正的按钮点击一样移动。小提琴链接：http://jsfiddle.net/jackJoe/YhDXm/.

.sample {
  width: 220px;
  height: 220px;
  position: absolute;
  overflow: hidden;
  margin: 180px;
  border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: url(http://static.adzerk.net/Advertisers/2362.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 188px 188px;
}
.sample > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}
.sample > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 200%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.sample > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
  margin: 0;
  color: white;
  position: relative;
  z-index: 0;
}
.sample:hover {
  background-color: #f0eade;
  box-shadow: 1px 1px 5px #363024;
  -webkit-box-shadow: 1px 1px 5px #363024;
  -moz-box-shadow: 1px 1px 5px #363024;
  position: relative;
  top: 10px;
  margin: 180px;
}

<div class="sample">
  <header>
    <p><a>
          Skyscraper
        </a>
    </p>
  </header>
</div>

【问题讨论】：

您的小提琴与您的问题完全不同。我不清楚你在追求什么。
你的意思是这样的：jsfiddle.net/YhDXm/1185 ?
抱歉造成混淆，我说的是 div 样本在悬停时会移动，但图像不会。所以我希望图像与 div 一起移动。
@caramba 感谢您的提示，感谢。

标签： html css

【解决方案1】：

您的背景图片保持静止，因为您启用了background-attachment: fixed;。

From MDNbackground-attachment: fixed

这个关键字意味着背景相对于视口是固定的。即使元素具有滚动机制，“固定”背景也不会随元素移动。

完全删除您的background-attachment 语句并将您的background-position 更改为0 0（或左上角），然后您将需要适当地修改子元素。

Fiddle here with adjustments made.

现在我已经完成了，一些补充建议：

您应该绝对不要这样做使用top 或任何其他位置属性。这些将导致对每个悬停事件（即使使用position: absolute;）和至少一次绘制进行布局重新计算。如果您在该页面上有很多内容，您的用户可能会对页面上的卡顿感到沮丧或不满。

相反，使用transform: translate(X, Y); 是一个非常便宜且同样有效的举措。 Here is the fiddle 与此合并

【讨论】：

【解决方案2】：

我找到了我的问题的答案，谢谢大家的帮助，这是小提琴链接：http://jsfiddle.net/YhDXm/1186/

.sample {
  width: 220px;
  height: 220px;
  position: absolute;
  overflow: hidden;
  margin: 180px;
  border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: url(http://static.adzerk.net/Advertisers/2362.jpg);
  background-repeat: no-repeat;  
  background-position: 0 0;
}
.sample > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}
.sample > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;

  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.sample > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
  margin: 0;
  color: white;
  position: relative;
  z-index: 0;
}
.sample:hover {
  box-shadow: 1px 1px 5px #363024;
  -webkit-box-shadow: 1px 1px 5px #363024;
  -moz-box-shadow: 1px 1px 5px #363024;
  position: relative;
  top: 10px;
  margin: 180px;
}
<div class="sample">
  <header>
    <p><a>
          Skyscraper
        </a>
    </p>
  </header>
</div>

【讨论】：